|
梳理一下自己写响应式页面的流程。
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 iphone5 iphone4*/
}
根节点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%
| 
转播
