移动端响应式布局

响应式设计

无论以哪种方式仍必不可少的设置Meta 标签

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

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  

[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）

一、百分比布局

百分比布局还原设计稿能力还是有限。

二、通过媒介查询来设置样式 Media Queries

根据获取设备的大小来设置内容的样式
html{font-size:20px;}

@media screen and (min-width:320px){html{font-size:17.07px;}}

@media screen and (min-width:360px){html{font-size:19.2px;}}

/*当设备处于375px的时候的他的font-size就等于（百分比数=375/20）*/

@media screen and (min-width:375px){html{font-size:20px;}}

@media screen and (min-width:412px){html{font-size:21.97px;}}

@media screen and (min-width:414px){html{font-size:22.08px;}}

假如我们要设定兼容 iPad 和iphone的视图，那么可以这样设置：

/** iPad **/

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

/** iPhone **/

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

三、使用 Bootstrap

  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

三、注意px 与rem\em 的转化

百分比数=基数/16

基数一般是10px 或者 14px

百分比=基数/10px

rem = px/基数 em=px/基数

基数为10px    html{ font-size:10px}         1.4rem =14px/10px

基数为14px    html{font-size:14px }     1rem= 14px /14px

body{font-size=14px} 1em=14px /14px

4.弹性图片

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