阅读 92

移动端是怎么做适配的?

方法一、viewport

它提供有关视口初始大小的提示,仅供移动设备使用。

值的内容为:

<meta name="viewport">
复制代码
Value 可能值 描述
width 一个正整数或者字符串 device-width 以pixels(像素)为单位, 定义viewport(视口)的宽度。
height 一个正整数或者字符串 device-height 以pixels(像素)为单位, 定义viewport(视口)的高度。
initial-scale 一个0.0 到10.0之间的正数 定义设备宽度(纵向模式下的设备宽度或横向模式下的设备高度)与视口大小之间的缩放比率。
maximum-scale 一个0.0 到10.0之间的正数 定义缩放的最大值;它必须大于或等于minimum-scale的值,不然会导致不确定的行为发生。
minimum-scale 一个0.0 到10.0之间的正数 定义缩放的最小值;它必须小于或等于maximum-scale的值,不然会导致不确定的行为发生。
user-scalable 一个布尔值(yes 或者no) 如果设置为 no,用户将不能放大或缩小网页。默认值为 yes。

方法二、媒体查询

可以通过@media来控制屏幕发生变化时相对应的变化

例:

@media screen and (min-width: 900px) {
  .article {
    padding: 1rem 3rem;
  }
}
复制代码

上述这段代码中,当屏幕小于900px时,.article对应的标签的padding值将会改变,移动端也是,当屏幕缩小的时候,我们可以做些相应的改变来适应移动端。

方法三、动态rem方案

1rem等于根元素html的font-size的值,那么可以调整根元素的font-size值来调整页面缩放后的各个元素的尺寸和定位。

在script标签加入这段代码:

<script>
   var pageWidth=window.innerWidth  //获取屏幕宽度
   document.documentElement.style.fontSize= `${pageWidth/60}px`
</script>
复制代码

此处,fontSizede的值为屏幕宽的十分之一,那么在写CSS的时候可以这样写:

.xxx{
    width:0.4rem;
    height:0.2rem;
    margin:0.05rem 0.05rem;
    float:left;
 }
复制代码

用sass将px转化为rem:

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth: 320px; 
复制代码

那么1rem=32px

文章分类
前端
文章标签