CSS经典问题-移动端的适配方案

菜妹
1,336 阅读5分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

一、px + viewport适配

通过动态设置meta标签的viewport让css中的1px等于设备的1px。

  viewport是用户的网页可视区域。通常viewport是指视窗、视口，浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。

  在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口

  • 布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况。

  • 视觉视口：用户通过屏幕看到的页面区域，通过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大；当放大的时候，屏幕覆盖的css像素变少，视觉视口变小。

  • 理想视口：一般来讲，这个视口其实不是真实存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。也就是我们想要通过适配给用户呈现的这个窗口。

设置理想视口就在header中加入这样一行代码：

 <meta name="viewport" 
     content="width=device-width,
              user-scalable=no,
              initial-scale=1.0,
              maximum-scale=1.0,
              minimum-scale=1.0">

二、媒体查询media query

通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置 优点：

  • media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
  • 方法简单，只需修改css文件
  • 调整屏幕宽度时不用刷新页面就可以响应页面布局

缺点：

  • 代码量大，不方便维护
  • 不能够完全适配所有的屏幕尺寸，需要编写多套css样式
  • 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
  • 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式
@media screen and (max-width: 320px){
    ....适配iphone4的css样式
}
@media screen and (max-width: 375px){
     ....适配iphone6/7/8的css样式
}
@media screen and (max-width: 414px){
    ....适配iphone6/7/8 plus的css样式
}
......

三、rem布局

  rem就是root em是前端开发中的一个动态单位,rem是一个相对于根元素字体大小的单位。

  例如 根元素(html) font-size: 12px; ,那么1em就等于12px。

1、基于设计图的rem布局

  通常我们拿到的设计图宽度的是750的设计图，但是我们如果要想让1px像素等于设计图的1px该怎么做呢？

  其实很简单，直接让根元素的font-size: 0.5px即可（因为是2倍图，1px等于2实际像素，所以为0.5px）。但是市面上的机型不一定都是750px的，这个时候我们就要进行等比缩放了。

html.fontSize = clientWidth / 750

还有一个小问题，平常开发都是基于谷歌chorme开发的，chrome并不支持font-size小于12的字体。所以可以让font-size大于12，在以上基础上将结果放大100倍，然后写样式的时候再除以100。嗯~看到这里我觉得很绕啊，不过开始放在这里了。

html.fontSize = clientWidth / 750 * 100

样式：

.element {
    width: 0.1rem; /* 实际到6/7/8上就是10px */
}

2、基于屏幕百分比的rem布局

  这种方式是给元素设置百分比，例如2个div想占满宽度100%，那么一个div设置宽度为50%，这样不固定宽度，使得在不同的分辨率下都能达到适配。

  各子元素或属性的百分比设定计算：

  1. 子元素width、height的百分比:子元素的width或height中使用百分比，是相对于子元素的直接父元素

  2. margin和padding的百分比：在垂直方向和水平方向都是相对于直接父亲元素的width，而与父元素的height无关

  3. border-radius的百分比：border-radius的百分比是相对于自身宽度，与父元素无关
    优点：

  • 宽度自适应，在不同的分辨率下都能达到适配 缺点：
  • 百分比的值不好计算
  • 需要确定父级的大小，因为要根据父级的大小进行计算 各个属性中如果使用百分比，相对父元素的属性并不是唯一的
  • 高度不好设置，一般需要固定高度

四、vw布局

vw表示相对于视口的宽度，vh表示相对于视口高度。

vw单位换算：视口宽度为100vw占满整个视口区域，那么1vw相当于占整个视口宽度的1%，所以1px= 1/375*100 vw

所有的页面元素都可以直接进行计算换算成vw单位，但是这样计算和百分比方案计算比较类似，都会比较麻烦。

优点：

  • 指定vw\vh相对与视口的宽高，由px换算单位成vw单位比较简单

缺点：

  • 直接进行单位换算时百分比可能出现小数,计算不方便
  • 兼容性- 大多数浏览器都支持、ie11不支持
  • 少数低版本手机系统 ios8、android4.4以下不支持
avatar
文章
阅读
粉丝