基于 vw 单位的移动端适配方案学习笔记

Mr_houzi 发布于2019-08-30 11:19 / 1323人阅读

摘要：基于单位的移动端适配方案学习笔记回顾并总结一下移动端适配的一些知识前提要求里添加兼容性让它自个儿玩去吧计算的设计稿宽度设计稿上对应设备上多少个单位的表示设备屏幕宽度的的大小同时也是单位的大小为了方便后面的尺寸计算放大倍即设计稿上

基于 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

GPU云服务器云服务器移动端适配方案移动端适配移动端适配 js html 单位vw

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114918.html

基于 vw 单位的移动端适配方案学习笔记

摘要：基于单位的移动端适配方案学习笔记回顾并总结一下移动端适配的一些知识前提要求里添加兼容性让它自个儿玩去吧计算的设计稿宽度设计稿上对应设备上多少个单位的表示设备屏幕宽度的的大小同时也是单位的大小为了方便后面的尺寸计算放大倍即设计稿上基于 vw 单位的移动端适配方案学习笔记回顾并总结一下移动端适配的一些知识前提要求 head里添加meta 兼容性,ie9+ (ie8 让它自个儿...

xuxueli 2019-08-02 15:28 评论0 收藏0
移动端适配方案

摘要：业务环境是决定整体项目的适配方案的核心因素。而淘宝的主站和类似，分为移动端页面和端页面，端页面同样有着左右的留白，这也是为了让用户能够在宽屏的时候将注意力集中在中间区域。移动端适配方案移动端适配方案是一个老生常谈的话题，但是对于不同的项目、不同的业务场景可能会需要不同的适配方案来进行移动端适配，向下兼容的baseline也需要提前订好。整体宽高其实移动端适配就和下面的玩具一样，...

feng409 2019-08-30 15:54 评论0 收藏0
茴字的四种写法—移动适配方案的进化

摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

canger 2019-08-22 16:12 评论0 收藏0
茴字的四种写法—移动适配方案的进化

摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

Pocher 2019-08-02 10:10 评论0 收藏0