8 响应式设计

Posted 2021-04-30 Alanbeta

响应式设计包含三个方面：

1. 媒体查询：一种CSS语法，可以根据浏览器的特性（屏幕或浏览器容器宽度）提供CSS规则。

2. 流式布局：使用em或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放。

3. 弹性图片：使用相对单位确保图片再大也不会超过其容器。

   
   

媒体查询的实现方式：

1. @media规则

2. <link>标签中的media属性

   
   

@media  <媒体类型/媒体特性>  {

        <CSS>

}

媒体类型：

• all：所有设备

• handled：手持设备（小屏幕、单色、带宽有限）

• print：分页媒体或打印预览模式下的屏幕

• screen：彩色计算机屏幕

• braille：盲文点字触觉反馈设备

• embossed：盲文分页打印机

• projection：投影仪

• speech：语音合成器

• tv：电视机

  
  

任意时刻浏览器窗口中只能使用一种媒体类型。

媒体类型从IE6开始支持，媒体特性从IE9开始支持。

媒体特性：

1. min-device-width、max-device-width：设备屏幕的尺寸

2. min-width、max-width：视口的宽度，例如浏览器窗口宽度

3. orientation（值为portrait和landscape）：设备是横屏（landscape）还是竖屏（portrait）

   
   

可使用逻辑运算符and、not、or及关键字all、only组合媒体类型和媒体特性，其中only样式可以用来对不支持媒体查询的浏览器隐藏样式表。

在IE8及以下版本的IE浏览器中使用媒体查询可以使用腻子脚本Respond.js.

<link type="text/css" media="媒体类型/媒体特性" href="XXX.css" />

断点（breakpoint）：媒体查询起作用的屏幕宽度。

@media screen and (max-width: 640px) {

        /*CSS规则*/

}

1000px的断点适合平板电脑，640px的断点适合智能手机横屏，320px适合智能手机竖屏。

取消iPhone和iPad中“缩小适应”的默认行为（但会引发一个bug）：

<meta name="viewpoint" content="width=device-width"; maximunscale=1.0 />

如果网页布局中的所有结构化元素使用的都是auto或者百分比宽度值，则从固定布局转换为流动布局只需要把固定宽度的外包装元素设为百分比宽度。

流动布局：

#wrapper {width: 98%;}

弹性图片：

img {max-width: 100%;}

Safari Mobile中的bug：设备从竖屏旋转到横屏时会导致缩放和重绘问题。

让下拉菜单支持触摸：

.touch nav.menu li ul {

    -webkit-transition: 1s opacity;

    -moz-transition: 1s opacity;

    transition: 1s opacity;

}

触摸屏幕其他地方关闭菜单：

(function(){$(window). on('touchstart', $. noop);})();