web自适应尺寸方法

原文链接

移动端页面开发通常用的是rem单位来做不同分辨率屏幕的自适应，那我们怎么从UI设计稿的PX像素单位自动转换到rem呢？

我们写了一个方法来解决，只要输入设计稿的元素尺寸，就可以自动转换过来。

//宽度基准
!(function(win, doc) {function setFontSize() {var docEl = doc.documentElement;var winWidth = docEl.clientWidth;doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';}var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';var timer = null;win.addEventListener(evt, function() {clearTimeout(timer);timer = setTimeout(setFontSize, 300);}, false);win.addEventListener('pageshow', function(e) {if (e.persisted) {clearTimeout(timer);timer = setTimeout(setFontSize, 300);}}, false)setFontSize();
}(window, document))
复制代码

上述代码中的1080就是你设计稿设计的尺寸，根据不用的尺寸来填写，然后调用这个方法后，你页面所有的元素单位就会转换为rem，在页面具体中的用法就是，比如你设计稿的文字大小为12px,那么你在页面样式代码中就要写成0.12rem，以此类推，页面代码中的尺寸就是你设计稿中的原始尺寸除以100。

转载于:https://juejin.im/post/5c6cbf79f265da2dd8688c32

web自适应尺寸方法相关推荐

Web自适应布局你需要知道的所有事儿
有这样一个问题. 请说说你知道的所有web布局方式? 一般来说,有以下这些布局方法: 浮动 float:left|right inline-block display:inline-block fle ...
手机web——自适应网页设计（html/css控制） - 51CTO.COM
手机web--自适应网页设计(html/css控制) - 51CTO.COM 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头 ...
pyqt界面屏幕分辨率自适应_在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法 PyQt5: 程序入口添加 QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_EnableHi ...
一张图片的CSS自适应尺寸圆角方案
css圆角图片一直都是一个烦人的问题. 虽说css3被广泛支持后这个问题就不存在了.可谁知道要等到那一年.因此目前一个好的解决方案还是很有实际意义的. 网上解决的方法已经很多.我都不是很满意. 本来我 ...
纯CSS实现正方形、自适应正方形方法
纯CSS实现自适应正方形的几种方式在写页面布局时候正方形对我们来说应该很常见,比如商品列表展示,头像展示, 在微博上发布图片的展现等正方形用固定的形式写很简单直接长＝宽写固定的值如下 <d ...
opencv自适应尺寸模板匹配
opencv自带的模板匹配常规做法: 1.转换灰度图 cvtColor(img_template, img_template, CV_RGB2GRAY);cvtColor(org, org, CV_R ...
flash自适应屏幕 html,flash自适应分辨率方法大集合
flash自适应分辨率方法大集合 1.thisin的办法在flash中写: 程序代码 if (System.capabilities.screenResolutionX>=1024) { Sta ...
网页中插入优酷土豆视频并让它自适应的方法
网页中插入优酷土豆视频并让它自适应的方法 2016-12-14 13:06 网页设计标签:视频 2459 发表评论今天看到一篇文章,讲的是Wordpress主题自适应插入视频的方法 ...
网站管理员总是嫌弃我的图片大，怎么提供适合网页WEB的尺寸图片？
网站管理员总是嫌弃我的图片大,怎么提供适合网页WEB的尺寸图片?这有一招教你处理首先你用Photoshop打开任意一张图片,不管它多大,您首先先调整他的尺寸大小,单位px,让宽度保持和你网页最大显示 ...

web自适应尺寸方法

web自适应尺寸方法相关推荐

最新文章

热门文章