移动端适配的几种方式

百分比适配方式

这种方法,只是宽度能适配,高度不能适配,只能设置某个高度固定死

需求:是四个div高度为100px,宽度等宽横向排列




    
    Document
    
    


    

移动端适配的几种方式_第1张图片

 

 

动态生成viewport适配方式

这种方式其实是动态设置缩放比例,动态创建meta标签,并且将计算出来的缩放比例放到这个标签的content属性里面

如果目标尺寸设置320,那么整个屏幕宽度就是320px,设置为750那么整个屏幕就是750px,这样我们页面中的每个元素就可以根据设计图来设置宽高了




    
    Document
    
    
    


 

 

rem适配方式

rem适配方式第一步首先需要设置视口的约束(固定的)

先来看一下在rem适配之前是怎么样的




  
  
  Title



  

分析运行结果,当屏幕的宽度是320的时候,这个box的宽度比例是200/320,当换一个手机屏幕大小不一样的,比如375的那么box的宽度比例是200/375

那么在不同手机中相同的一个box盒子占整个屏幕的宽度比例就不一样了,所以呈现的效果也是不一样的

移动端适配的几种方式_第2张图片

那么对于这个问题可以使用rem来做适配,rem适配最主要的就是html根元素字体大小设置屏幕区域的宽度,这样整个屏幕就变成了1rem为基准,然后在设置每个元素的时候试用rem来做单位




  
  
  Title




  

这样当我们屏幕宽度是320的时候,1rem就等于320 ,2rem就等于2*320,当屏幕宽度是375的时候1rem就等于375,也就是说1rem会随着屏幕的宽度来变化适应

 

 

其他适配插件

项目开发中可以使用上面这几种方式去做移动端的适配也可以使用一些插件来帮我们做这个适配,比如:lib-flexible和postcss-px2rem

使用方法查看这篇文章:基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem

你可能感兴趣的:(CSS大全)