博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端 html基值(转载)
阅读量:4704 次
发布时间:2019-06-10

本文共 907 字,大约阅读时间需要 3 分钟。

(function () {          document.addEventListener('DOMContentLoaded', function () {              var html = document.documentElement;              var windowWidth = html.clientWidth;              html.style.fontSize = windowWidth / 6.4 + 'px';              // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';          }, false);      })();

这个6.4就是根据设计稿的横向宽度640来确定的,假如你的设计稿是750

那么 html.style.fontSize = windowWidth / 7.5 + 'px';

(1)至此,font-size的基础值就确定好了,而且知道该font-size值是手机deviceWidth跟设计稿的比例值的100倍(重要)

(2)那么页面元素该如何设置宽高、边距

  例如:一个设计稿宽高为140px的图标,左边距为50px,那么它的css应该这样写

.icon {
width: 1.4rem; /* 像素换算rem:140px / 100 = 1.4rem */ height: 1.4rem; margin: 0 0 0 .5rem;}

因为html的font-size是放大了100倍,所以计算rem时,要用设计稿的实际像素除以100,140px /100 =1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽的比例自动计算出来。

 源自:http://blog.csdn.net/huang100qi/article/details/49886713

转载于:https://www.cnblogs.com/dongxiaolei/p/6322584.html

你可能感兴趣的文章
iOS IM开发的一些开源、框架和教程等资料
查看>>
FansUnion:共同写博客计划终究还是“流产”了
查看>>
python 二维字典
查看>>
Arrays类学习笔记
查看>>
实验吧之【天下武功唯快不破】
查看>>
2019-3-25多线程的同步与互斥(互斥锁、条件变量、读写锁、自旋锁、信号量)...
查看>>
win7-64 mysql的安装
查看>>
dcm4chee 修改默认(0002,0013) ImplementationVersionName
查看>>
maven3在eclipse3.4.2中创建java web项目
查看>>
发布时间 sql语句
查看>>
黑马程序员 ExecuteReader执行查询
查看>>
记一些从数学和程序设计中体会到的思想
查看>>
题目1462:两船载物问题
查看>>
POJ 2378 Tree Cutting(树形DP,水)
查看>>
UVA 116 Unidirectional TSP (白书dp)
查看>>
第三方测速工具
查看>>
数据访问 投票习题
查看>>
cnblog!i'm coming!
查看>>
使用点符号代替溢出的文本
查看>>
fatal: remote origin already exists.
查看>>