以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。
这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。
字体、宽高都用rem来定义，此方法略爽！
@media (min-width:0px){
html{font-size:12px;}}
@media (min-width: 320px){
html{font-size:12px;}}
@media (min-width: 340px){
html{font-size:13px;}}
@media (min-width: 360px){
html{font-size:14px;}}
@media (min-width: 380px){
html{font-size:15px;}}
@media (min-width: 400px){
html{font-size:15px;}}
@media (min-width: 420px){
html{font-size:16px;}}现在找到了一个方法，页面插入一段js，切图时看设计稿多宽页面就定义多大的宽度，字体的大小和内容的宽高就看设计稿的px
比如是24px，那么写样式就是1.5rem
这个时候牵扯算法1rem = 16px
<script type="text/javascript">
function fontSize(){
var deviceWidth=document.documentElement.clientWidth>640?640:document.documentElement.clientWidth;
document.documentElement.style.fontSize=(deviceWidth/25)+"px";
}
fontSize();
window.onresize=fontSize;
</script>
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）