rem 针对设计稿宽度,设计rem调试比例
rem 针对设计稿宽度,设计rem调试比例
一, 网易适配方法
屏幕宽度/设计稿rem宽度=页面动态font-size值
(function(doc, win) {var docEl = doc.documentElement;resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';recalc = function() {var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;if(!clientWidth) return;docEl.style.fontSize = clientWidth / 7.5 + 'px';};if(!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
解释:
这样就设置好了每个页面的根fonts-size,因为rem单位是基于根font-size,因此只要确定一种设计稿对应手机的换算,
其余屏幕尺寸均可自动适配。
上面我们得出设计稿换算rem的基准值是100,因此只需要把设计稿上的px值除以100即为我们要的rem值。
Px/100=rem,所以100px=1rem,25px=0.25rem
二, 手淘适配方法
大名鼎鼎的Flexible
引入: 直接引用阿里的CDN文件(或下载到本地引入)
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>`在这里插入代码片`
设定: 页面不要设定 。Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。
换算:假设拿到的设计稿和上述网易的一样都是750,Flexible会把设计稿分为10份,可以理解为页面width=10rem,即1rem=75px,所以根font-size(基准值)=75px。之后的css换算rem公式为:
px/75=rem,所以100px=100/75=1.33rem,50px=50/75=0.66rem
换算工具:
显然,可以看出px与rem的换算因为基准值的不同而有些复杂,甚至需要借助计算器的辅助。在这里推荐一个换算神器:“cssrem”
cssrem: 配值设置px_to_rem - px转rem的单位比例,假设拿到设计稿750,基准值是75,此处就设75max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。available_file_types - 启用此插件的文件类型。[".css", ".less", ".sass", ".scss"]。
(function(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function() {var clientWidth = docEl.clientWidth;if (!clientWidth) return;docEl.style.fontSize = 32 * (clientWidth / 320) + 'px';};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
网易方案
1、拿到设计稿除以100,得到宽度rem值
2、通过给html的style设置font-size,把1里面得到的宽度rem值代入x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;
3、设计稿px/100即可换算为rem
优:通过动态根font-size来做适配,基本无兼容性问题,适配较为精准,换算简便。
劣:无viewport缩放,且针对iPhone的Retina屏没有做适配,导致对一些手机的适配不是很到位。
手淘方案
1、拿到设计稿除以10,得到font-size基准值
2、引入flexible
3、不要设置meta的viewport缩放值
4、设计稿px/ font-size基准值,即可换算为rem
优:通过动态根font-size、viewpor、dpr来做适配,无兼容性问题,适配精准。
劣:需要根据设计稿进行基准值换算,在不使用sublime text编辑器插件开发时,单位计算复杂。
rem 针对设计稿宽度,设计rem调试比例相关推荐
- 移动端根据设计稿宽度适配 px转换相对单位rem
为了计算方便,一般建议 1rem = 100px(设计稿px),要换算这样的比例需要设置html对应的fontSize,计算规则如下: fontSize = 屏幕宽度 / 设计稿宽度 * 基本宽度 如 ...
- android开发还原设计稿,TextView设计稿完美还原思考
在开发工程师与设计师配合过程中,经常会遇到的问题就是设计师提供设计图,开发工程师严格按照设计图开发完成,但结果就是无法做到设计稿完美还原,需要在后期进行视觉走查的过程中进行微调,占用开发时间,本着效率 ...
- Vue笔记 (二) 如何做移动端适配 让你只用关心设计稿
一. 移动端基础知识 在移动端开发时,我们经常发现出现布局后有不兼容的问题,如何在不同设备上进行适配呢,希望康完这边,你能从原理到应用彻底熟悉移动端适配. 1.1 手机屏幕现状 移动端设备屏幕尺寸非常 ...
- 移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题 单位问题 肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流
从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...
- html还原ui,前端高度还原设计稿(字体篇)
前言: 以前前端都是拿到psd设计图,需要自己用ps切图,需要自己在psd上面一个个去量设计的大小和间距,而现在一般都是要求设计师把设计稿直接上传到蓝湖上面,通过蓝湖的标注来写出前端代码!下面我就前端 ...
- 移动端H5设计稿的问题与解决办法汇总
前沿 就目前来看,移动端的H5是目前的一大趋势,毕竟就目前来说手机占据的极大的市场,人们每次都会在空闲时刻拿起自己的手机浏览网页,应用以及各种内容,但是针对于各种不同的手机长宽比以及分辨率是不同的,如 ...
- 移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
- 腾讯ui测试机实时预览软件,腾讯ISUX终端设备实时预览Photoshop的设计稿的神器Ps Play...
Ps Play是一个通过Wi-Fi网络,实时在终端设备上预览电脑上Photoshop的设计稿,可同步调试及截图保存到移动终端,并可以通过Email.微信等工具即时分享的跨终端应用.这就是这个工具的功能 ...
- Android应用开发——从设计稿到手机屏幕的UI尺寸转换
情景导入 假设我们需要将这个计算器UI界面设计到1080*2340,440dpi(pixel 5)上,我们如何求每个控件的dp值? 数学建模 1:获取设计稿中控件的px值 QQ截图可以获取设计稿px值 ...
最新文章
- 太阳的光和灯光有什么区别_太阳光
- linux使用交叉工具链产生的程序怎么下载到mini2440里,Ubuntu安装ARM架构GCC工具链(ubuntu install ARM toolchain)最简单办法...
- 数据分析 python 用途-Python 从爬虫到数据分析
- 递归--整数划分问题
- 【数学和算法】初识卡尔曼滤波器(四)
- Interview:算法岗位面试—10.25早上—上海某电公司算法岗位(偏图像算法,国企)技术面试之比赛历程、项目收获(Pytorch和Tensorflow)、未来方向
- 成功解决sklearn\preprocessing\label.py:151: DeprecationWarning: The truth value of an empty array is amb
- Python爬虫教程(四)
- 日期与时间(C/C++)
- 64 位 win7(2008 r2) 使用PLSQL Developer x86 32bit的解决方法
- java buqi_Java 异常
- mysql float 怎么设置长度_MySQL中float double decimal区别总结
- Android MediaPlayer 播放音频
- Spring MVC拦截器的执行流程
- Linux部署Web项目小记
- mac上最好用的免费PDF阅读器是哪个
- JSP程序设计第二版--附带实验代码
- STM32 使用SPI读写FLASH(W25Q64型号)
- 一禅小和尚的人生哲学
- ubuntu查看电脑配置信息