响应式布局

响应式布局(Responsive Layout)

为不同的屏幕分辨率定义布局，同时，在每个布局中应用流式布局，即页面元素宽度随窗口调整而自动适配。
每个屏幕分辨率下会有一个布局样式，同时位置会变，大小也会变。

优点

面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题

缺点

兼容各种设备工作量大，效率较低，代码会出现隐藏无用的元素，加载时间加长

响应式布局步骤

1.布局及设置meta标签

<meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--IE兼容-->
<meta content="width=device-width, initial-scale=1.0" name="viewport"><!--响应式-->
<meta name="apple-mobile-web-app-capable" content="yes" /><!--WebApp全屏模式-->
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"><!--中文字体识别-->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><!--禁止页面缩放-->

标签详解 参考

属性名	备注
viewport	在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不允许用户再重新缩放。
width	设置layout viewport的宽度，为一个正整数，使用字符串"width-device"表示设备宽度
initial-scale	设置页面的初始缩放量，为一个数字，可以带小数，范围从>0到10
minimum-scale	允许用户的最小缩放比例，为一个数字，可以带小数
maximum-scale	允许用户最大的缩放比例，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"yes"或者"no"，即“允许”或者“不允许”。这个属性可以解决ipad切换横屏之后触摸才能回到具体尺寸的问题

2.通过媒体查询来设置样式media query

media query是响应式设计的核心，能够和浏览器进行沟通，告诉浏览器页面如何呈现。
推荐使用根据媒体查询结果执行css片段中不同的选择器

@media only screen and (max-width: 980px) {}

不推荐使用根据媒体查询结果执行不同的外部css文件
浏览器会请求不符合条件的外部css文件，影响效率

<link media="screen and (min-width:768px) and (max-width:996px)" rel="stylesheet" href="css/screen_pad.css">

3.设置多种视图宽度

例如：要想兼容ipad和iphone视图，代码可以这样写：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px)and (width:768px){}

4.字体设置

一个响应式的字体应关联它的父容器的宽度，这样才适应客户端屏幕。css3引入rem，rem是相对于根元素的。

/*不要忘记重置根元素字体大小*/
html{font-size:100%;}
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

html{font-size:百分数;} 这里的百分数=基数/16
基数一般为10px
例如：
基数10 则百分数62.5%
基数14 则百分数87.5%

px换算rem
公式=想要的px/基数
例如：设置了html{font-size:62.5%;},想给容器里的文字设置字号14px，换算成rem就是14px/10=1.4rem

响应式设计可能会遇到的问题

①宽度不固定，可以使用百分比

#header{width:100%;}
#content{width:50%;}

②图片液态化
图片处理的万能方法，液态化实现图片自适应

#wrap img{
	max-width:100%;/*通过max-width控制图片的最大宽度*/
	height:auto;
}
/*此时图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的宽高比例，以至于图片不会失真*/

除了img标签的图片以外，还有背景图片。例如：logo为背景图片

#log a{display:block;
        width:100%;
        height:40px;
        text-indent:55rem;
        background-img:url(logo.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
        }
/*
background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。
background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸
*/

③图片在网页缩小自适应时无法居中(bootstrap中)
为img标签添加类属性 class=“img-responsive center-block”

④用百分比实现响应式时出现的问题：在设置好样式后，当缩小或放大浏览器窗口，或者是将手机横屏后，布局会乱，刷新后布局又好了。
原因：网页加载后，css已经渲染到页面，将手机横屏后，虽然宽度已经改变，但是CSS已渲染成功，无法改变，导致布局会乱。
解决方法：
1.添加js事件，监听屏幕尺寸变化事件(resize事件)，在屏幕变化时重新加载页面(reload)。此方法存在问题，就是在页面上已经输入的表单文字或者其他在网页刷新时会清空。(不推荐使用)
2.添加js事件，监听屏幕尺寸变化事件(resize事件)，获取当前屏幕宽度，动态设置根元素的宽度为屏幕宽度。

⑤百分比设置响应式时，不同像素的百分比相差很大。比如1920px屏幕和800px的屏幕，用相同百分比设置页面时，差距很大，页面效果很差。所以，应配合媒体查询技术，配置不同分辨率的百分比。

⑥用百分比设置页面时，如果页面无限缩小后，一些字或者图片或者图表等会产生堆叠，所以建议设置最外层容器的最小宽度min-width为一个固定像素的值(如：min-width:800px)，当屏幕宽度达到800时将产生滚动条，不会发生堆叠，可提升用户体验

响应式布局实现原理

遵循移动端优先，交互和设计应以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，有两个关键点要做到响应式：响应式布局和响应式内容(图片、多媒体)

• 响应式布局
  • 使用Meta标签定义
  • 使用Media Queries适配对应样式
• 响应式内容
  • 响应式图片