2018-08-17 分类：HTML/CSS 作者：管理员 阅读（4200）
在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化的例如vue-cli，那可以选择postcss-pxtorem更为合适。
看起来还不错，1rem=37.5px（苹果6下）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | // JavaScript Document (function flexible (window, document) { var docEl = document.documentElement; //获取文档根节点并保存到变量docEl中(相当于获取到html对象) var dpr = window.devicePixelRatio || 1; //获取像素比，如果window.devicePixelRatio为false是dpr为1，如果window.devicePixelRatio大于1，那么dpr赋值取大的数 function setBodyFontSize () { if (document.body) { //获取到body对象是否存在，个人觉得啰嗦 document.body.style.fontSize = (12 * dpr) + 'px'; } else { document.addEventListener('DOMContentLoaded', setBodyFontSize); } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document)) |
通过函数方式封装，然后传进去名字和值
1 2 3 | .rem(@name,@px) { @{name}: unit(@px / 75, rem); } |
因为装了less插件，在less文件写好了保存下，同文件目录上会自动生成一个.css同名字的文件，直接引入这个文件即可使用。
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
上一篇：【ES6】Class类的基本使用
唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与 
对的，记得还要留意下header中的flex-shrink属性
评：未知宽高不满一屏footer固定在底部这里主要是用了flex-grow属性吗?当子盒子高度小于父盒子高度时占据了父盒子剩余的空间,...
评：未知宽高不满一屏footer固定在底部嗯，语言没表达好，我去改下，我最后写的那段demo，是想体现数据不可变的思想，通过去单独加一...
评：js中map方法到底是否会改变原始数组？你最后还是写的map呀
评：js中map方法到底是否会改变原始数组？0基础手把手教怎么做主题的教程那得录制视频，光文字描述没多大用，录视频的话，正所谓台上三分钟...
评：未知高度div在屏幕上下左右居中fixed固定定位你从0开始教人制作一个简单的WP主题吧。估计比你这个文章受众更多。
评：未知高度div在屏幕上下左右居中fixed固定定位
共有 0 条评论 - 使用less自动进行移动端rem适配计算