ftp网站建立,校园兼职网站建设,老年人做网站,谷歌浏览器在线打开刚看了一篇真正教会你开发移动端页面的文章(二)#xff0c;文章写的很清楚#xff0c;现总结下他的核心思想及自己所查阅的一些资料#xff1a;假设设计稿是iPhone6(iPhone6设备像素为750px#xff1b;设备像素比为2#xff0c;即其适口尺寸为375px)上有200px的方块box文章写的很清楚现总结下他的核心思想及自己所查阅的一些资料假设设计稿是iPhone6(iPhone6设备像素为750px设备像素比为2即其适口尺寸为375px)上有200px的方块box一、关于普通元素尺寸(一)、box的大小无论在什么设备下大小都是固定的body{ margin: 0; padding: 0;} .box{ width: 200px; height: 200px; background: red;} var scale 1 / window.devicePixelRatio; document.querySelector(meta[nameviewport]).setAttribute(content,widthdevice-width,initial-scale scale , maximum-scale scale , minimum-scale scale , user-scalableno); (二)、box的大小随着屏幕的宽度大小变化而按比例变化(方法一)body{ margin: 0; padding: 0;} .box{ width: 2.6666667rem;/* 200 (box设计的宽度) / 75(设备像素宽度的十分之一) 2.6666667 */height: 2.66666667rem; background: red;} var scale 1 / window.devicePixelRatio; document.querySelector(meta[nameviewport]).setAttribute(content,widthdevice-width,initial-scale scale , maximum-scale scale , minimum-scale scale , user-scalableno); document.documentElement.style.fontSize document.documentElement.clientWidth / 10 px; 注document.documentElement.clientWidth 为布局视口尺寸iPhone5为320pxiPhone6为375px当然如果设计稿是iPhone5(设计稿的宽度为640px)则1rem 为64px那么box宽高应该为200/643.125rem这种方法我们可以看到需要一些换算过程也许你会觉得繁琐其实不然我们可以借助less来完成例如// 例如: .px2rem(height, 200);.px2rem(name, px){{name}: px / 75 * 1rem;}因此对于200px 的宽高我们可以这样写.px2rem(width, 200);.px2rem(height, 200);在iPhone6下 HTML就会转换成.px2rem(width, 2.6666667 rem);.px2rem(height, 2.6666667 rem);因此不需要我们自己亲自计算。(三)、box的大小随着屏幕的宽度大小变化而按比例变化(方法二)对于iPhone6的设计稿来说(设计稿总宽度尺寸为750px)先设置html的font-size为100px(也就是1rem)这样总宽度为7.5rem我们就以页面总宽7.5rem为基准对于iPhone6的适口宽度(375px)来说我们可以设置font-size为375/7.550px对于iPhone5的适口宽度(320px)来说我们可以设置font-size为320/7.542.6666667px也就是document.documentElement.style.fontSize document.documentElement.clientWidth / 7.5 px;因此对于设计稿中的200px宽高我们直接使用200px/100px2 也就是2rem即可无论在什么设备下都会等比例缩放body{ margin: 0; padding: 0;} .box{ width: 2rem; height: 2rem; background: red;} document.documentElement.style.fontSize document.documentElement.clientWidth / 7.5 px; 当然这是对于iPhone6的设计稿来说的如果对于iPhone5的设计稿(总宽为640px)我们可以同样采用先设置html的font-size为100px这样总宽度为6.4rem200px的box则为2rem 对于iPhone5的适口宽度来说我们可以设置font-size为320px/6.450px(200px的box还是为2rem即100px)对于iPhone6的适口宽度来说我们可以设置font-size为375/6.458.59375px(200px的box还是为2rem即117.1875px)因此可将上面的代码中的document.documentElement.style.fontSize部分改为document.documentElement.style.fontSize document.documentElement.clientWidth / 6.4 px; 即可相关文章 动态rem简单示例相关插件gulp-postcss、postcss-pxtorem 、gulp-posthtml、posthtml-postcss、postcss-pxtorem二、关于字体尺寸对于字体不建议使用rem单位而是采用媒体查询例如media screen and (max-width: 321px) { body { font-size:16px}}media screen and (min-width: 321px) and (max-width:400px) { body { font-size:17px}}media screen and (min-width: 400px) { body { font-size:19px}}作者该帐号已被查封链接https://www.jianshu.com/p/dffa036d7595
