移动端适配：rem配合vw？？

阿珊和她的猫

2023年度博客之星前端领域TOP 1

博客专家认证

2020-05-22 05:11:53

一般大家收到原型图去开发的时候会考虑适配问题吗
移动端单位是不是最好用rem
别人说rem配合vw之类的
大家呢

...全文

176 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

潇湘忆梦 2020-05-22

打赏
举报

回复

弹性布局的rem，em很好用看下效果：http://caibaojian.com/vw-vh.html

weixin_41355373 2020-05-22

打赏
举报

回复

使用VUE ：lib-flexible和postcss-px2rem-exclude可以完美解决移动端适配问题

weixin_41355373 2020-05-22

打赏
举报

回复

当然会考虑到适配问题，rem是不错的选择

一次讲清移动端适配解决方案-rem和vw.docx

px转换vw&&rem

仿京东移动端首页布局，包括固定尺寸布局、rem适配布局、vw适配布局，设计稿尺寸使用的iPhoneXR的414px * 896px。我们可以通过在不同移动端设备上展示移动端网页，发现固定尺寸布局的不足之处，以及rem适配、vw适配的原理。其中vw适配的网页css使用的是scss语法，使用了函数、变量、嵌套等语法。

yo-CSS 目录 1. 编码指导（规范） 2. 练习册 3. 不错的网站 CSS的各种常规的、神奇的操作。 4. 工具常用代码 SCSS 一些常用函数 移动端适配：rem 和 vw 方案笔记（或填坑记）【vue 系列】props 传递对象时如何保留没有赋值的属性默认值在线工具 CSS triggers 在特定的浏览器内核下，一个CSS属性的改变是否会引起Layout、Paint、Composite。 Can I Use 查看JS、CSS、HTML等的浏览器兼容状况。 sass内置函数速查：http://sass-lang.com/documentation/Sass/Script/Functions.html

1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点字体的大小。所以不用px; 根字体：字体的大小px; px：你就当成cm(厘米)这样的东西吧；基准：750设计稿；这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作为什么

39,084

社区成员

5,548

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章