css - rem布局的字体问题
问 题 使用rem布局时候,字体不推荐使用rem,要使用如下: [data-dpr="2"] div { font-size: 24px; } [data-dpr="3"] div { font-size: 36px; } 但是iphone6,iphone5,iphone4的dpr都是2,但是其屏幕尺寸确不同,若容器安装750设计稿的rem布局,字体在iphone5时会超过容器大小,请问这个问题各位是如何解决的? 解决方案 字体也用rem没问题的
262 2022-07-19
编程技术问答社区
javascript - getBoundingClientRect().width和clientWidth都能获取设备宽度,他们有什么区别吗?
问 题 今天看flexible.js的代码,发现获取宽度使用getBoundingClientRect而不是直接clientWidth,请问这两个方法获取宽度有什么区别吗? document.documentElement.clientWidth document.documentElement.getBoundingClientRect().width; 解决方案 getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。 此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。 当不隐藏子级内容,即overflow为auto时,前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);例子如下:
1266 2022-07-17
编程技术问答社区
viewport - 关于flexible适配方案缩放视口的疑问
问 题 前几天看了阿里移动端的适配方案flexible,原理很简单,根据设备dpr,来添加特定缩放值的meta viewport头部。(具体实现的代码如下) //获取dpr值,计算缩放值 if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr
182 2022-07-17
编程技术问答社区
javascript - flexible.js插件使用疑问?
问 题 如果是用flexible.js设置font-size的大小,那么在写元素大小的时候该怎么写,是按照font-size:64px去继承写rem,参照尺寸是哪个? 还有我之前写手机端用的是媒体查询+css的方式, 用sass定义了px转换成rem的方法,可以动态计算。 但是现在改用这个插件,那么px转换rem的方法改怎么修改才有用。 @function pxTorem($px){ //$px为需要转换的字号 @return $px / $browser-default-font-size * 1rem; } 解决方案 15年初的时候就开始用类似方案,配合 SASS 写个函数,其中 $w 为设计稿的宽除以10。 // rem 基准值,psd宽为750px $w: 75; @function rem($n) { @return ($n/$w) + rem; } 为你的 SCSS 文件引入上面的函数后,你在写代码时就只要量取PSD中的真实
212 2022-07-17
编程技术问答社区