rem布局确实是非常好的解决方案，对于移动端的自适应能够几乎非常完美的解决不同设备的适配，但是，在实际项目中，由于一些第三方库的使用，会造成冲突，因此，在只能使用px布局的时候，我们会遇到一些需要手动适配的场景。
一般来说，flex布局能够解决大部分场景，但是，也有一些其他场景，需要针对性的处理。
在移动端的不同设备上，正方形的边长是无法确定的，当只能确定正方形的宽或高的大概比例时（正方形没有宽高，指的是设备方向），就可以使用vh或vw来通过CSS拿到设备的宽或高，vh、vw是CSS3中根据设备高度或宽度定义比例的属性值。
九宫格.png
vw布局。
.selector {
height: 27vw;
width: 27vw;
border-radius: 3px;
background: #eee;
margin-top: 9px;
}
就可以同时根据设备宽度来适配。
在这里，我一行需要3个，因此排除一些padding之后，大概是设备宽度的27%左右。
前言 rem布局确实是非常好的解决方案，对于移动端的自适应能够几乎非常完美的解决不同设备的适配，但是，在实际项目中...
移动端开发和 PC 端开发有哪些区别 移动端 考虑手机兼容性 使用触屏事件 布局自适应rem 动画处理CSS3 移...
移动端自适应 100px=1rem
阅读本篇文章,你将大致了解到手机专用的自适应方案--移动端REM的应用 什么是rem css中长度单位有很多,比如...
移动h5 图片字体等适配WebApp开发之--"rem"单位Rem实现自适应初体验手机端页面自适应解决方案—rem布局
移动端rem自适应方案传送门https://segmentfault.com/a/1190000012225828
Layout Skill 使用vw定制rem自适应布局 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的...
目录 样式重置和公共样式 svg-icon 移动端适配lib-flexible用rem编写移动端自适应网页 vue...
移动端开发中的相关概念讲解 1、移动端自适配方案 移动端如何根据不同手机尺寸进行页面的适配 rem 自适应和 vw...
这里引用了rem概念，利用rem实现移动端的自适应，附上flexible的链接。 这里实现了三种滚动方式， 单条数...
本文标题：css 移动端自适应非rem的一些场景
本文链接：https://www.haomeiwen.com/subject/snymwftx.html
网友评论