首页手记 02、CSS3-响应式布局

02、CSS3-响应式布局

标签：

Html/CSS CSS3

响应式布局原理
第一步：Meta标签
大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。<meta name="viewport" content="width=device-width, initial-scale=1
user-scalable=no">

第二步：HTML结构
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素，更多都是百分比操作，这一条非常重要。
字体也不能使用绝对大小(px)，而只能使用相对大小(em)。

第三步：媒体查询-Media Queries
CSS3 Media Query-媒体查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
媒体查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒体查询可以写在同一个或者单独的样式表中。

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

HTML中的条件注释:<!--[if lt IE 9]>
 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.staticfile.org/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>
 <![endif]-->

一、响应式布局

实现不同屏幕分辨率的终端上浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

优点:
  面对不同分辨率设备灵活性强; 
  能够快捷解决多设备显示适应问题;
缺点:
  兼容各种设备工作量大，效率低下;
  代码累赘，会出现隐藏无用的元素，加载时间加长;
  其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果;
  一定程度上改变了网站原有的布局结构，会出现用户混淆的情况;

如何实现响应式布局?
通过CSS3中的Media Query（媒体查询），对应不同屏幕大小，使用不同的样式操作；

二、viewport视口

  例如: 浏览器是相框，照片要放到相框中，照片比较大的时，照片就是进行缩放操作，但整体内容也缩放了；另外，照片要打印到相片纸中，再将其放入到相框中；
  PC端，要显示图片，是直接将图片渲染到浏览器窗口中；
  移动端，要显示图片，不是直接渲染到浏览器窗口中的，而是渲染在虚拟区域中即是viewpot；（移动端比PC端多了一层viewport，即可以通过设置viewport来控制整体页面的显示）

viewport的概念
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的区域。用来显示网页的那部分区域，但viewport可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。默认情况下，移动设备上的viewport都是要大于浏览器可视区域的，默认的viewport设为980px或1024px(值由设备自己决定的)。浏览器可视区域的宽度是比这个默认的viewport的宽度要小，所以出现横向滚动条。
css中的1px并不等于设备的1px
在css中我们一般px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素。可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。
实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
利用meta标签对viewport进行控制
最常见的操作即是: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。

  - width: 设置layout viewport  的宽度，为一个正整数，或字符串"width=device-width"(设备宽度)
  - initial-scale: 设置页面的初始缩放值，为一个数字，可以带小数
  - minimum-scale: 允许用户的最小缩放值，为一个数字，可以带小数
  - maximum-scale: 允许用户的最大缩放值，为一个数字，可以带小数
  - height: 设置layout viewport  的高度，这个属性对我们并不重要，很少使用
  - user-scalable: 否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

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

三、媒体查询

媒体查询可用于检测很多事情:

  - viewport(视窗) 的宽度与高度
  - 设备的宽度与高度
  - 朝向 (智能手机横屏，竖屏)
  - 分辨率

媒体查询语法

 // 表达式根据条件是否成立返回 true 或 false@media not|only mediatype and (expressions) {
    CSS-Code;
}

  - not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）;
  - only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件;
  - all: 所有设备，这个应该经常看到

多媒体类型

  - all: 用于所有多媒体类型设备
  - print: 用于打印机
  - screen: 用于电脑屏幕，平板，智能手机等
  - speech: 用于屏幕阅读器

根据屏幕不同，引入不同的样式表

  <!-- 屏幕在1000px以上的-->
  <link href="a.css" rel="stylesheet" media="screen and (min-width: 1000px)" />

  <!-- 屏幕是在600px~1000px-->
  <link href="b.css" rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 1000px)" />

  <!-- 屏幕是在小于400px的-->
  <link href="c.css" rel="stylesheet" media="screen and (max-width: 400px)" />

通过媒体查询，添加不同样式

  // 屏幕最小宽度是1000px
  @media screen and (min-width: 1000px) {
    div {
      width: 1000px;
      height: 50px;
      margin: 10px auto;
      color: white;
    }
  }  // 屏幕最小宽度是400px，最大是1000px@media screen and (min-width: 400px) and (max-width: 1000px){
    div {
      width: 50%;
      height: 50px;
      margin: 10px auto;
      color: white;
    }
  }

作者：EndEvent
链接：https://www.jianshu.com/p/96aefecb7936

点击查看更多内容