响应式web设计-第一章 HTML5、CSS3及响应式设计入门

1.手机上浏览的网页越多，需要优化的东西越多。放大缩小页面，然后为了看到视口外的文字，再左右拖动

大多数情况，根据视口大小为用户提供与之匹配的视觉效果还是优先选择。（字体大小要调整）

一句话概括响应式：针对任意设备对网页内容进行完美布局的一种显示机制

2.大多数情况不使用像素px，而会用em或%（相对度量单位）

Internet Explorer用户请下载安装Microsoft Internet Explorer Developer Toolbar，下载地址如下：http://www.microsoft.com/download/en/details.aspx?id=18359
如果你在使用Safari，虽然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ ResizeMe.html）的功能类似且免费，但我最爱Resize（http://resizeSafari.com）。

Firefox用户请下载Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/），Chrome请下载Windows Resizer（https://chrome.google.com/webstore/detail/kkelicaakdan- hinjdeammmilcgefonfh）。

3.HTML5新增了语义化标签元素

<header>
    <nav>
        <ul id="nav-list">
            <li>Home</li>
            <li>About</li>
        </ul>
    </nav>
</header>

页面中的一些通用结构体如头部和导航等有了独立的标签，使用nav会使代码更有语义化。搜索引擎能比以前更好地理解我们的网页，相应地评定网页内容。

4.css3为响应式设计和更多创新奠定基础

①为了给<a>元素添加圆角背景方法一：需要两张图片（滑动门）

a{
    display: block;
    height: 40px;
    float: left;
    font-size: 1.2em;
    padding-right: 0.8em;
    background: url("images/huadong-left.png") no-repeat scroll top left;
}
a span{
    background: url("images/huadong-right.png") no-repeat;
    display: block;
    line-height: 40px;
    padding-left: 0.8em;
    padding-right: 0.8em;
}

<a href="#"><span>Box Title</span></a>

图片：

滑动门还要了解可以看我的 https://blog.csdn.net/weixin_41056807/article/details/81201648

为了给<a>元素添加圆角背景方法二：css“雪碧”（Sprite）技术，将两张图片合成一张，然后用background-position属性来调整定位，虽然节省一点带宽，但是不是一个灵活的方案.

上面方法一用了a和span标签，增加一个多余标签（例子中为span）和两次额外的服务器端HTTP请求（两张图片）较为繁琐。所以出现css3，代码简化为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /**{*/
            /*margin: 0;*/
            /*padding: 0;*/
        /*}*/
        a{
            display: block;
            height: 40px;
            float: left;
            line-height: 40px;
            font-size: 1.2em;
            padding-left: 0.8em;
            padding-right: 0.8em;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            background: url("images/huadong-right.png") no-repeat;
            background-repeat: repeat-x;
        }

    </style>
</head>
<body>
    <a href="#">Box Title</a>
</body>
</html>

效果：

注意：在使用图片作为背景时，一定要对其高度注意，以防内容溢出（缺点会产生更大的图片，需要更多带宽）

css3提供border-radius及相关属性帮助设置圆角

css3进一步不再需要渐变背景图片而是使用浏览器渲染的效果

有关渐变的文章：https://www.cnblogs.com/xiaohuochai/archive/2016/04/12/5370446.html

5.css代码可以给不支持渐变的浏览器提供一个纯色背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a{
            display: block;
            height: 40px;
            float: left;
            line-height: 40px;
            font-size: 1.2em;
            padding-left: 0.8em;
            padding-right: 0.8em;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            background-color: #42c264;
        }

    </style>
</head>
<body>
    <a href="#">Box Title</a>
</body>
</html>

还有

background-image: -webkit-linear-gradient(#4fec50,#42c264);

background-image: -moz-linear-gradient(#4fec50,#42c264);
background-image: -o-linear-gradient(#4fec50,#42c264);
background-image: -ms-linear-gradient(#4fec50,#42c264);
background-image: -chrome-linear-gradient(#4fec50,#42c264);
background-image: linear-gradient(#4fec50,#42c264);

linear-gradient属性是指示浏览器从第一个颜色值渐变到另一个颜色，不同的前缀适合不同浏览器（包括 -moz- 代表的
Mozilla Firefox， -ms- 代表的 Microsoft Internet Explorer等）

6.网站不必在所有浏览器中表现一致。应该支持现代浏览器，通过响应式网页设计，响应不同设备的不同浏览器视口

例子

http://demo.marcofolio.net/3d_animation_css3

http://designlovr.com/ examples/dynamic_stack_of_index_cards/

响应式web设计-第一章 HTML5、CSS3及响应式设计入门

猜你喜欢