移动端响应式布局

响应式设计

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

  

[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

 

三、注意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%}