一、元素大小有两种写法
1、写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小。做页面时,设计稿是多少px,就写多少px,sublime会把px自动转换成rem,省略口算或心算。
2、写公式
A、如果设计师给尺寸为375px的sketch设计图,某DIV宽120px,就可以写120rem/28
B、如果设计师给尺寸为750px的psd设计图,某DIV宽120px,就可以写120rem/56
二、移动端自适应要点
1、<!DOCTYPE html> 2、<meta name="viewport"content="initial-scale=1, maximum-scale= 1, minimum-scale=1, user-scalable=no"> 3、多用100%,rem。px较稳定和精确,em是一个相对于父元素字体的大小,rem是相对于根元素字体的大小。 4、fixRem,js引入。非常重要,可以省略媒体查询,不用设置max-width等样式,非常方便。通常以iphone6为标准,375px宽度,28px字体大小。
三、举个例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport"content="initial-scale=1, maximum-scale= 1, minimum-scale=1, user-scalable=no"> <title>改变字体大小做自适应页面</title> <style type="text/css"> body, button, input, select, textarea { font-family: Helvetica; font-size: 12px; border: 0; outline: 0; } body, ul, li { margin: 0; padding: 0; } ul, li { list-style: none; } .mymenu { position: relative; overflow: hidden; border-bottom: 1px solid #e81b75; -moz-box-shadow: 0 0.25rem 0.25rem #c6c5c5; -webkit-box-shadow: 0 0.25rem 0.25rem #c6c5c5; box-shadow: 0 0.25rem 0.25rem #c6c5c5; } .mymenu li { float: left; box-sizing: border-box; width: 25%; text-align: center; background-color: #f55097; border-right: 1px solid #f5b9c6; } .mymenu li a { display: inline-block; width: 100%; height: 1.607143rem; line-height: 1.607143rem; font-size: 0.5rem; color: #fff; text-decoration: none; } </style> </head> <body> <ul class="mymenu"> <li><a href="javascript:;">新年快乐</a></li> <li><a href="javascript:;">羊年大吉</a></li> <li><a href="javascript:;">万事如意</a></li> <li><a href="javascript:;">心想事成</a></li> </ul> <script> window.onload=function() { function fixRem() { var windowWidth = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth; // windowWidth = windowWidth > 750 ? 750 : windowWidth; var rootSize = 28 * (windowWidth / 375); var htmlNode = document.getElementsByTagName("html")[0]; htmlNode.style.fontSize = rootSize + 'px'; } fixRem(); window.addEventListener('resize', fixRem, false); } </script> </body> </html>