响应式布局详细介绍

时间 2019-11-29

标签响应布局详细介绍繁體版

原文原文链接

1、响应式布局css

　　定宽布局的局限：屏幕愈来愈宽，而定宽的宽度是固定的，看定宽的网页不美观html

　　　　　　　　　　屏幕也在一直往小变，定宽也不合适，看不到完整的网页内容前端

　　在这种状况之下，就出现了一种自适应布局，分别是早起的流动式布局（根据浮动，基本淘汰）和百分比宽度布局（还有一些应用）。css3

　　百分比布局的局限：不够完美，无法获得一个很好的显示效果。bootstrap

　　　　　　　　　　　屏幕太大，撑满整个屏幕，很差，屏幕过小，画面太过拘谨也很差。浏览器

　　屏幕尺寸过于碎片化，咱们到底要设计什么样的网页才能知足全部人呢？iphone

　能够采起一个网站有多个尺寸的适配，两套设计方案，可是这样毕竟是浪费了人力成本。布局

　　有没有一套方案，就在全部终端都有比较好的呈现效果呢？字体

　　方案就是响应式布局！网站

　　在同一张网页，根据屏幕大小的不一样，自动调整网页之中的内容布局

响应式布局如何实现？

　　一、实现响应式布局的三个要素：

　　　　viewport视口设置

　　　　@media媒体查询

　　　　不要把尺寸写死：多用百分比宽度来肯定布局尺寸

　　　　　　　　　　多用rem em来肯定布局尺寸（在第六部分有更具体的说明）

　　　　　　　　　　多用vh vw来肯定布局尺寸（在第七部分有更具体的说明）

　　二、视口设置：

　　　　视口就是可见的屏幕尺寸

　　　　视口不说高度只说宽度，由于高度是根据内容撑开的，宽度才是须要设置的

　　　　移动端：视口就是屏幕的大小

　　　　　　　　由于都是全屏显示的通常

　　　　设置方法：设置meta标签就能够

　　媒体查询：查询咱们用什么设备来访问网页

　　　　　　　媒体查询查的实际上是视口宽度

2、媒体查询的写入方式：

　　　　一、style标签中的media属性

　　　　　　<style media="screen and (max-width:340px)"> 屏幕不超过340的时候才执行下面的内容

　　　　　　body{

　　　　　　　　　background:#00a9c1;

　　　　　　　　　}

　　　　　　<style>

　　　　　　不一样的媒体查询能够并列起来（上下两个媒体查询能够一块儿写）

　　　　　　　　body{　　　　

　　　　　　　　　　background:rgb(16,136,65);

　　　　　　　　　　　}

　　　　　　　</style>　　　　

 1 <head>
 2     <meta charset="UTF-8">
 3     <meta name="viewport"
 4           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 6     <title>Document</title>
 7     <style>
 8         body{
 9             margin: 0;
10         }
11     </style>
12     <style media="screen and (max-width:340px)">
13         body{  background: #00a9c1; }
14     </style>
15 
16     <style media="screen and (min-width:340px) and (max-width:720px)">
17         body{  background: rgb(16,136,65); }
18     </style>　　　　　
19 </head>

　　二、在link标签中设置media属性

　　　　上述代码分别设置了宽度小于340px和340-720px的背景颜色。下面咱们经过引入外部css样式的方法来继续写720px-1080px的样式。

<link rel="stylesheet" href="720-1080.css" media="screen and (min-width:720px) and (max-width:1080px)">

　　　　并制定css的内容 body{ background: rgb(34,205,210); }

　　三、外链css样式中的@media属性（用的最多）

　　　　只引入外部css文件，查询所有写在外部css文件中。完美的实现了内容和样式的分离。

　　　　在head标签中写入： <link rel="stylesheet" href="1080.css">

　　　　在1080.css中写入：

1 @media screen and (min-width:1080px) and (max-width:1100px) {
2     body{
3         background: rgb(255,0,255);
4     }
5 }

　　　　这段代码指定了网页的宽度在1080-1100的宽度的时候显示背景为紫色。

3、媒体查询的尺寸是如何肯定的？

　　　　http://screensiz.es/phone 是一个前端开发者必备的一个网站，上面列出了市面上大部分常见机型的分辨率大小。

　　咱们在设计分辨率的节点的时候，要以比较关机的机型的分辨率做为参考来设置。

　　好比iPhone四、5的宽度是320px，这个节点就很是重要，它是小屏幕手机的一个分界点，通常都会在媒体查询的时候设置这个点。

　　ipad mini的宽度是768，因此第二个节点就设置为768 。

　　附：iPad媒体查询的写法

　　　　@media only screen and (min-width:768px) and (max-width:1024px){

　　　　　　语句

　　　　}

　　　　iPhone媒体查询的写法

　　　　@media only screen and (min-width:320px) and (max-width:767px){

　　　　　　语句

　　　　}

4、到底如何使用媒体查询设置网页？

　　响应式网页、或者说媒体查询的本质是布局。

　　首选须要考虑的是：你是想从小往大作，仍是想从大往小作。这是两种彻底不一样的设计方案。

　　你的网页自己是现有电脑端，从电脑端往手机端适配，仍是一开始就是作给移动端看的，再适配pc。

　　对于媒体查询的影响就是：媒体查询是从小往大了写仍是从大往小了写，是写min-width仍是写max-width（真正用的时候只写一个）。

　　附连接：优雅降级和渐进加强　　　　　　

　　　　　　响应式布局CSS3 Media Queries中屏幕分辨率顺序写法比较

5、最麻烦的问题——兼容性

　　IE六、IE七、IE8是不支持媒体查询的。

　　解决方案：css3-mediaqueries.js。引入此文件能够解决IE6-8没法实现响应式媒体查询的尴尬。

　　在Bootstrap上面咱们能够找到这个在线的库。

　　（在bootstrap上面搜索css3以后就能够看到）

　　引入地址的写法：

<!--[if lt IE 9]> //条件注释判断是IE9如下版本的浏览器

　　<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>（完整版）

　　<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>（min版，两个版本任选其一）　　

　　<![endif]-->

6、　　em & rem

　　em、rem是尺寸单位，能够用在字体上面，也能够用在其余元素上面。

　　取值来源：

　　　　em：父级元素上定义的font-size为基准的倍率尺寸。

　　　　　　好比：html结构为<div><p></p></div>

　　　　　　　　样式里面设置div{

　　　　　　　　　　　　　　　　font-size:20px;

　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　width:30em;

　　　　　　　　　　　　　　　　height:2em;

　　　　　　　　　　　　　　　}

　　　　经过例子咱们能够知道，em取值的大小是根据父级设置的字体大小来肯定的，默认状况下1em=16px（就是浏览器默认字体大小），但em不只能够用于设置字体的大小，还能够用于设置其余元素的大小（如p、input等）。

　　　　第二个例子：<div class="outer">

　　　　　　　　　　　　　　</div>

　　　　而后设置样式：.outer{ font-size=100px }

　　　　　　　　　　　.middle{ font-size=0.5em }

　　　　　　　　　　　.inner{ width:3em;height:3em }

　　　　inner的宽高是150px。由于字体的尺寸是能够继承的，middle的大小是50px，inner的大小就是3个0.5em，也就是150px，而不是300px。

　　　　经过这个例子咱们能够知道，在嵌套中计算字体大小是比较麻烦的，因此有了rem的这个单位。

　　　　rem：root font-size+em，即设定html的字体大小，根据这个大小来设定其余元素的大小。这个html的字体大小不能设定为10px，推荐为20px。

　　　　经过引入resize.js，能够方便设置rem。

 1 /*得到页面宽度后动态修改html上的fontsize
 2 * 320为iphone5设计稿下的页面宽度，以下设置后页面的页面在iphone5等宽屏幕上html
 3 * 的font-size会变为20px，即 1rem = 20px    1px=0.05rem
 4 * 因此设置元素尺寸的时候，若是测量设计稿 15px  则需设置尺寸为 (0.05*15)rem = 0.75rem   
 5 */
 6 
 7 
 8 !(function(doc, win) {
 9     var docEle = doc.documentElement,
10         evt = "onorientationchange" in window ? "orientationchange" : "resize",
11         fn = function() {
12             var width = docEle.clientWidth;
13             width && (docEle.style.fontSize = 20 * (width / 320) + "px");
14         };
15      
16     win.addEventListener(evt, fn, false);
17     doc.addEventListener("DOMContentLoaded", fn, false);
18  
19 }(document, window));

　　　　上面的例子以iPhone四、iPhone5的320像素为参考，以20像素为基准，在这些设备上设置1rem显示的就是20px。若是设计稿要求以320px的屏幕为基准显示15px，则需设置元素大小为0.75rem。

7、　　vh、vw

　　　　v表明device（设备），h即height，w即width

　　　　经过当前设备视口按照百分比来取值

　　　　例子：height：10vh即视口大小10%的高度。以iPhone5为例，iPhone5视口高度568px，10vh就是56.8px。