摘要:基于单位的移动端适配方案学习笔记回顾并总结一下移动端适配的一些知识前提要求里添加兼容性让它自个儿玩去吧计算的设计稿宽度设计稿上对应设备上多少个单位的表示设备屏幕宽度的的大小同时也是单位的大小为了方便后面的尺寸计算放大倍即设计稿上
基于 vw 单位的移动端适配方案学习笔记
回顾并总结一下移动端适配的一些知识前提要求
"head"里添加"meta"
兼容性,ie9+ (ie8 让它自个儿玩去吧)
计算 html 的"font-size"// 设计稿宽度, 750|640|520 var designWith = 750 // 设计稿上1px对应设备上多少个单位的vw, 100vw表示设备屏幕宽度 var vw = 100 / designWith // html的font-size的大小 // 同时也是单位rem的大小 // 为了方便后面的尺寸计算,放大100倍,即设计稿上的100px; var fontSize = 100 * vw // 设置html的font-size, 可以直接写在 css 里面 document.getElementsByTagName("html")[0].style.fontSize = fontSize + "vw"使用
设计稿上元素的尺寸(px): eleWidth
.ele { width: (eleWidth/100)rem; }code
Document
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54153.html
摘要:基于单位的移动端适配方案学习笔记回顾并总结一下移动端适配的一些知识前提要求里添加兼容性让它自个儿玩去吧计算的设计稿宽度设计稿上对应设备上多少个单位的表示设备屏幕宽度的的大小同时也是单位的大小为了方便后面的尺寸计算放大倍即设计稿上 基于 vw 单位的移动端适配方案学习笔记 回顾并总结一下移动端适配的一些知识 前提要求 head里添加meta 兼容性,ie9+ (ie8 让它自个儿...
摘要:是阿里团队开发的前端适配方案,也是用的的方法。那么第一种方法其实已经能解决前端适配问题了,为什么阿里还要开发一个呢在第一种方法中,时没有任何问题,但是在或者更高的手机屏幕上,因为物理像素的增加,存在小于的显示空间。 话说我刚工作的时候,就开始用rem了,过了没多久,接触到了flexible,系统化且支持iOS的retina屏迅速征服了我,最近又看到了大漠大神的vw。所以本文想完成一篇一...
摘要:是阿里团队开发的前端适配方案,也是用的的方法。那么第一种方法其实已经能解决前端适配问题了,为什么阿里还要开发一个呢在第一种方法中,时没有任何问题,但是在或者更高的手机屏幕上,因为物理像素的增加,存在小于的显示空间。 话说我刚工作的时候,就开始用rem了,过了没多久,接触到了flexible,系统化且支持iOS的retina屏迅速征服了我,最近又看到了大漠大神的vw。所以本文想完成一篇一...
阅读 1198·2023-04-25 23:22
阅读 1594·2023-04-25 20:04
阅读 2587·2021-11-22 15:24
阅读 2776·2021-11-11 16:54
阅读 1834·2019-08-30 14:03
阅读 1447·2019-08-29 16:35
阅读 1617·2019-08-26 10:29
阅读 2574·2019-08-23 18:01