最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6: 375px*667px 实际像素:750px*1334px)如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜,正常人都知道那是不对的,我在做 ...
使用lib flexible在react中先安装 npm install lib flexible save 因为插件使用的是rem适配,所以安装两个插件 npm install postcss px rem save npm install postcss px rem exclude save 然后在配置文件webpack.config.js中引入插件 const px rem requir ...
2019-11-29 09:40 0 336 推荐指数:
最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6: 375px*667px 实际像素:750px*1334px)如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜,正常人都知道那是不对的,我在做 ...
750的设计图,设置font-size: 125%; 1rem =20px; 大部分浏览器默认的字体大小为16px,谷歌默认字体大小为12px; 其他设备的fon-size的比列: 320/720*(20/16*100%) ...
为什么是750px? (1)iphone6设计图一般是750px的,1rem = 100px,从设计稿量出的 ...
对于移动端自适应各种终端的解决方案较多,本篇只是选择其中一种rem适配,我个人做移动端最喜欢的方案。 rem就是以html根元素的字体大小为参考,比如html:font-size:20px;1rem=20px;2rem=40px.....,因为移动端的屏幕特殊之处,主要是不同类型手机像素比dpr ...
lib-flexible --save 引入flexible 在项目入口文件main.js ...
总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价main.js中引用flexible import ...
rem 移动端自适应 移动端适配 在用 vue cli3.x 写项目的过程中,遇到了一些问题,当我 用 Vant 框架时,官方文档提示说 Vant的样式默认使用 px 作单位,如果使用 rem 的话,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss ...
可能有很多人没有接触过移动端页面、或者接触的少,都会问移动端页面怎么写? 宽度百分比,高度自适应可能大家都知道这么个写法,然后字体再用css3的媒体查询(@media)来针对每个手机尺寸分别写不同大小的html字体(我最初就是这么写的)。 因为写的页面多了,觉得这种方法有很多弊端存在,比如手机 ...