移动端css尺⼨适配⽅案
移动端页⾯等⽐例放⼤缩⼩适配⽅案
做了四个多⽉⼩程序的开发，受rpx单位的影响，想着能不能单纯的利⽤css做出rpx的效果，拿个移动端的项⽬练了⼀下⼿，分享⼀下⽅案。不熟悉的童鞋⾃⾏了解。
也不算是单纯的css吧，借助了sass，其实less等等其他的css预处理语⾔都可以，只要它有⾃定义function的功能和计算的功能即可，本⼈习惯⽤sass⽽已。不了解的⾃⾏去官⽹学习。
下⾯是sass源代码，这⾥建议单独写成⼀个sass⽂件，在每个页⾯的sass⽂件中引⽤就可以了。
//定义的默认字体的⼤⼩，这⾥建议写成死的16px，若要改基本字体的⼤⼩，请将下⽅的1rem改成其他数字。
$browser-default-font-size: 16px !default;
//设计图的⾼
$basicHeight: 667px !default;
/
/设计稿的宽
$basicWidth: 375px !default;
//字体px转换成rem单位的⽅法
@function pxTorem($px){
@return $px / $browser-default-font-size * 1rem;
}
//元素⾼度转换成vh单位的⽅法
@function pxTovh($px){
//$px为需要转换的⾼度
@return $px / $basicHeight * 100vh;
状态背景图更改}
/
/元素宽度转换成vw单位的⽅法
@function pxTovw($px){
//$px为需要转换的字号
@return $px / $basicWidth * 100vw;
}
这⾥要多说⼀句，vw和vh，在pc端不⽀持低版本的IE浏览器，慎⽤。移动端基本主流的浏览器/内核d都⽀持，所以可以放⼼⼤胆的⽤。
再多说⼀句，由于平板宽⾼⽐和⼿机宽⾼⽐不太⼀致，所以会导致有些有背景图⽚需求的⽹页变形，图⽚被截掉了好多，但是，⼀般的功能性布局，就是⼿写的样式和元素，⼀般不会乱，能实现⼤概的等⽐例放⼤缩⼩的样⼦，ipad pro可能会有⼀个中⽂字符的偏差。
以上。
发布评论