以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。
这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。
字体、宽高都用rem来定义，此方法略爽！
@media (min-0px){ html{font-size:12px;} } @media (min- 320px){ html{font-size:12px;} } @media (min- 340px){ html{font-size:13px;} } @media (min- 360px){ html{font-size:14px;} } @media (min- 380px){ html{font-size:15px;} } @media (min- 400px){ html{font-size:15px;} } @media (min- 420px){ html{font-size:16px;} }
现在找到了一个方法，页面插入一段js，切图时看设计稿多宽页面就定义多大的宽度，字体的大小和内容的宽高就看设计稿的px
比如是24px，那么写样式就是1.5rem
这个时候牵扯算法1rem = 16px
<script type="text/javascript">
function fontSize(){
var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;
document.documentElement.style.fontSize=(deviceWidth/25)+"px";
}
fontSize();
window.onresize=fontSize;
</script>
插入一段我自己写的测试例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title>自适应字体大小和元素高度</title> <style type="text/css"> *{margin: 0;padding: 0;text-align: center;} h1{font-size: 2rem;padding: 2rem;} p{font-size: 1rem;padding: 1px;} div{width: 5rem;height: 4rem;background-color: #f00;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function fontSize(){ var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth; document.documentElement.style.fontSize=(deviceWidth/25)+"px"; } fontSize(); window.onresize=fontSize; </script> </head> <body> <h1>标题</h1> <p>内容</p> <div></div> </body> </html>
这个方法px准确率高，唯一美不中足的是算起来麻烦，两种方法看个人习惯了