手机端设计稿640px和750px不同设计稿下,px值转化成rem值
2018-01-08 08:23
253 查看
(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 = 100 * (clientWidth / 750) + 'px'; /*docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';*/ }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
如何使用?
这是rem布局的核心代码,这段代码的大意是:如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640) 为什么是750px?设计图一般是750px的,这样相当于100px = 1rem,可以方便计算;因为是750px所以应限制下页面的大小,所以最外层的盒子应该是:position: relative;
width: 100%;
max-width:750px;
min-width: 320px;
margin: 0 auto;
相关文章推荐
- rem、px、em之间的区别以及网页响应式设计写法
- 750px的iphone6的设计稿------------rem换算js代码
- 【原】设计稿中字体pt与px之间的转化
- Vue:将px转化为rem,适配移动端
- vue-cli + lib-flexible + px2rem实现px自动转化为rem
- Vue:将px转化为rem,适配移动端
- sass中转化为px转化为rem的使用
- 手机端px转rem
- Vue-cli 将px转化为rem,适配移动端
- css中字体单位的不同:px、em、rem
- 自使用移动端rem适配--并且vscode-px自动转化成rem
- 详解vue2.0 不同屏幕适配及px与rem转换问题
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
- px em rem
- rem,em,px的区别
- css中的px、em、rem 详解
- 程序设计中的三种不同出错的处理方式及其优缺点
- css中的px、em 、rem的区别
- css中的px、em 、rem的区别
- iOS.分层架构设计.03.基于同一工作空间不同工程的分层