响应式页面制作总结

梳理一下自己写响应式页面的流程。

1、头部加上meta 标签。

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

width=device-width  页面宽度为设备宽度

initial-scale=1.0       初始缩放为1.0

minimum-scale=1.0, maximum-scale=1.0, 最大最小缩放为1.0

user-scalable=no  不予许用户缩放

2、媒体查询像素用em表示

@media srceen and (max-width:120em){/*1920px*/

html{font-size:62.5%} /*这时候的字体大小都是按照10px计算的，1em==1rem=10em,但是最小字体不能小于12px，所以至少1.2em或者1.2rem。页面内容长宽的计算1rem=1em=12px,这一点要切记.上面用媒体查询em计算是1920/16来计算的 媒体查询是按照1em=16px*/

}

@media srceen and (max-width:105.5em){ /*1688px*/

}

@media srceen and (max-width:90em){ /*1440px*/

}

@media srceen and (max-width:85.38em){/*1366px*/

}

@media srceen and (max-width:64em){/*1024px*/

}

@media srceen and (max-width:48em){/*768px ipad mini*/

}

@media srceen and (max-width:26em){/*414px iphone6s*/

}

@media srceen and (max-width:24em){/*375px iphone6*/

}

@media srceen and (max-width:20em){/*320px iphone5iphone4*/

}

根节点html的font-size是62.5%，这时候长宽等于1em=1rem=12px;行高line-height1em=1rem=12px;字体大小为1rem=1em=10px，但是浏览器最小支持10px，所以字体不能小于1.2em或者1.2rem.

从1920宽度响应到小的宽度，其中字体和行高要变化，直接设置根节点html的font-size为75%