1.响应式页面的实现(媒体查询和bootstrap的栅格布局)
媒体查询针对不同的屏幕尺寸设置不同的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi "> <!--忽略页面中数字为电话号码,邮箱格式为邮箱--> <meta name="format-detection" content="telphone=no, email=no"/> <title>rem</title> <style type="text/css"> @media screen and (max-width:300px){//屏幕尺寸小于300px body{ background-color:red; } } @media screen and (min-width:300px) and (max-width:600px){ body{ background-color:green; } } @media screen and (min-width:600px){//屏幕尺寸大于600px body{ background-color:blue; } } </style> </head> <body> </body> </html>
2.页面使用相对字体
》em:相对值,继承父元素字体大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi "> <!--忽略页面中数字为电话号码,邮箱格式为邮箱--> <meta name="format-detection" content="telphone=no, email=no"/> <title>rem</title> <style type="text/css"> body{ font-size:20px; } .one{ font-size:1.5em; /*30px 1.5em*20px=30px;*/ } .two{ font-size:0.5em; /*15px 0.5em*30px=15px*/ } .three{ font-size:2em; /*30px 2em*15px=30px*/ } </style> </head> <body> <div class="one"> <span>第一层em</span> <div class="two"> <span>第二层em</span> <div class="three"> <span>第三层em</span> </div> </div> </div> </body> </html>
》rem:相对值,相对于根元素HTML
html的fontsize = 屏幕宽度/设计稿宽度*100(1rem=100px)
var html = document.getElementsByTagName('html')[0];//获取html元素 var w = document.documentElement.clientWidth || document.body.clientWidth;//屏幕宽度(兼容处理) html.style.fontSize = w *100/640 + "px";//640为设计稿宽度
3.百分比布局