2020-03-28CSS9 分钟读完 (大约 1383 个字)

详解响应式网页设计

总结一下响应式设计，包括响应式页面和响应式图片。

响应式页面包括根据不同设备<link>不同的css样式文件，还有css中使用@media规则。

响应式页面

首先在<head>中加入<meta>：

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

user-scalable=no 能够解决iPad切换横屏之后触摸才能回到具体尺寸的问题

表示网页默认宽度等于屏幕宽度，原始缩放比例为100%。

不能使用绝对宽度，只能用em,%。

对于元素宽度，不能使用px，只能用百分比或者auto。

1
2
3

header {
    width: 80%;
}

对于字体带下，不能使用px，只能使用em等相对单位。

/*body字体大小设置为10px*/
body {
    font-size: 62.5%;
}

/*h1字体大小设置为15px*/
h1 {
    font-size: 1.5em;
}

使用float使文档在横向放不下的时候自动换行，小心绝对定位的使用。
使用媒体查询选择性使用css

<!-- 如果宽度小于400px则使用tinyScreen.css -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

<!-- 如果宽度在400到600则使用smallScreen.css -->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

也可以在css中引入外部样式：

1	@import url("tinyScreen.css") screen and (max-device-width: 400px);

@media规则

以上媒体查询的作用是根据不同的宽度选择不同的css文件。

而@media的作用是根据不同的宽度选择不同的样式，也就是说只有符合@media后面的规则，声明块才会生效。

语法规则：@media media_type and （media_feature）{}

@media screen and (max-width: 400px) {
    body {
        background-color:#111;
    }
}

设置多种屏幕宽度的样式：

1 2	@media only screen and (min-width: 768px) and (max-width: 1024px) {} @media only screen and (min-width: 320px) and (max-width: 767px) {}

对于页面响应式设计，还可以通过写一个common.css，媒体查询为移动端后再写单独的mobile.css来覆写common.css里面的一些样式来达到响应式，或者直接就将多个适配样式写在一个css里面，像下面这样：

1
2
3

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
@media only screen and (min-width : 321px) {}
@media only screen and (max-width : 320px) {}

关于媒体查询中的关键词：and only not

only用来指定媒体类型：

1	@media only screen and (max-width: 1920px;) {}

not用来排除媒体类型：

1	@media not print and (max-width: 1000px) {}

max-device-width和max-width的区别：

max-device-width是设备的屏幕宽度。

max-width是浏览器宽度。

区别就是，在pc上查看网页的时候，缩放网页，max-device-width不执行css，因为设备宽度没变。而max-width执行css，因为显示宽度发生了变化。

那么什么时候用max-device-width什么时候用max-width？

通常来说，移动端用max-device-width，pc端用max-width。这也符合了我们的生活经验，使用手机缩放网页网页没有发生变化，而使用浏览器缩放网页网页会发生变动。

图片自适应

图片自适应：给图片指定最大宽度，如果超过就缩小，如果图片小就原尺寸显示。

img {
    width: auto;
    max-width: 100%;
}

图片、视频自适应：

img,object {
    width: auto;
    max-width: 100%;
}

老版本IE：

1
2
3

img {
    width: 100%;
}

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

1
2
3

img {
    -ms-interpolation-mode: bicubic;
}

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {
　　　　var imgs = document.getElementById("content").getElementsByTagName("img");
　　　　imgSizer.collate(imgs);
　　});

不过，最好还是根据不同大小的屏幕加载不同分辨率的图片。

响应式图片

为此，img标签引入了srcset属性：

1x,1.5x,2x为像素密度描述符，用来让浏览器识别，1x可省略。

描述符还可以是320w,480w等等。

<img srcset="pic-320.jpg 1x,
             pic-480.jpg 1.5x,
             pic-640.jpg 2x"
     src="pic.jpg">

浏览器会根据设备像素密度选择合适的图片，如果没有合适的则使用src图片。

还可以使用sizes指定不同规则的屏幕使用不同的图片：

sizes属性后面可以有多个以逗号隔开的段，每段前面是一个媒体查询，空格后面是要给该规格屏幕所指定的图片显示宽度。最后256px为缺省值。

注意：100vw为100%的屏幕宽度。

<img srcset="pic-320.jpg 320w,
             pic-480.jpg 480w,
             pic-640.jpg 640w"
     sizes="{max-width: 320px} 100vw,
            {max-wdith: 640px} 25vw,
            256px"
     src="pic.jpg">

浏览器对以上代码的执行：根据设备屏幕宽度从sizes选择图片显示宽度，再从secset中找出最接近的图片加载。故而sizes是要和srcset配合使用的，src为缺省值。

picture标签

picture是容器标签，内部有source和img。

写法如下：

<picture>
	<source media="(max-width: 500px)" srcset="cat-vertical.jpg">
    <source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
    <img src="cat.jpg" alt="cat">
</picture>

浏览器会根据source标签中的media依此判断设备屏幕是否符合，一旦遇到符合的media则选择其后面的srcset图片，如果所有source中的media都不符合则使用img标签中的src。

下面是一个综合例子：

<picture>
  <source srcset="homepage-person@desktop.png,
                  homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png,
                  homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png,
               homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

使用source的type属性用来加载不同格式的图片：

<picture>
	<source type="image/svg+xml" srcset="logo.xml">
    <source type="image/webp" srcset="logo.webp">
    <img src="logo.png" alt="ACME Corp">
</picture>