Web前端系列技术之移动Web开发（从基础开始）②

努力学前端的小柴

已于 2022-09-13 14:41:31 修改

阅读量446

点赞数 9

分类专栏：移动端Web基础学习文章标签：前端 java html web css

于 2022-08-22 23:22:19 首次发布

本文链接：https://blog.csdn.net/IAMLSD550/article/details/126448095

版权

移动端Web基础学习专栏收录该内容

3 篇文章 1 订阅

订阅专栏

移动适配

移动适配的目的是为了更好的兼容市面上的电子显示设备，既然是需要显示的技术，那么处于屏幕之下的Web开发技术就需要适配所有的屏幕尺寸；

完美的移动适配是不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；显示的文字、图片等其他元素大小合适，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的；

那么今天所要介绍的内容就是：
四、移动适配方案
五、REM方案
六、LESS学习
七、VW/VH方案

四、移动适配方案

在做移动端页面项目的时候，是经常会遇到移动端适配问题的，有的或许是需求适配各种设备的屏幕尺寸；有的又或许是适配各种设备的系统兼容；

但移动端网页在设备上的呈现问题，是首先就要解决的，所以就涉及到了网页元素适配屏幕尺寸问题；

曾经，解决网页适配问题通常都采用的是 百分比布局，但百分比布局的局限性就是它只能在宽度方向进行自适应缩放，高度方向不变，所以很快这种解决方案就被淘汰了；

而现如今，有两种解决方案是主流：REM方案 和 VW/VH方案 ；而其中 VW/VH方案 更是一些技术先进的大厂逐步发展的方向；

这两种方案都是以改变网页元素的宽高尺寸单位为目的的，所以所谓的 rem方案 和 VW/VH方案 均是把原有的 px 像素单位改为对应的 rem和vw/vh单位；

五、REM方案

REM方案是目前多数企业都在用的一种解决方案，是一种尺寸单位，其解决适配问题的效果是：

等比缩放：根据屏幕宽度不同，网页元素的尺寸也不同；

rem单位：
① 相对单位；
② rem单位是相对于HTML标签的字号计算结果；
③ 1rem = 1HTML字号大小；

注意：
网页的根就是HTML，那么根标签就是HTML签，所以根标签字号，就是HTML标签字号；

使用方式：
先给html添加字号标签，然后再给元素添加rem，如下所示：

/* 1rem = 1html标签字号大小 */
html {
     font-size: 20px;
}
.box {
     width: 5rem;
     height: 5rem;
     background-color: pink;
}

同样的代码在不同尺寸设备之下的效果：

在这里插入图片描述

1. 媒体查询

面对设备的尺寸不同和其分辨率也不同的情况下，设置差异化的CSS样式来设置不同的HTML的字号是非常必要的，但这该如何去设置不同的HTML标签字号呢？这里就是需要用到 媒体查询技术了；

原因：媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式；

代码如下：

/* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
/* 视口宽度为375px、根字号为40px */
@media (width:375px) {
   html {
        font-size: 40px;
        }
}

2. 字号设置

在选择适配不同尺寸的移动设备时，字号大小就需要一个标准，因为只有在设置标准字号的情况下，才能确保网页的元素可以在不同的设备上能标准的呈现；

根据目前REM布局方案中，往往将网页等分成10份，即HTML标签的字号为视口宽度的 1/10（取十分之一的目的其实就是为了方便计算）；

/* 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
@media (width:320px) {
    html {
        font-size: 32px;
    }
}
@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media (width:414px) {
     html {
        font-size: 41.4px;
    }
}

但是，使用媒体查询，终究是需要先确定设备的宽度尺寸才能设置字号，而市面上的移动设备各种各样，想要开发的移动Web适配每一种设备，很显然，这种方式并不可取；

这就需要用到手淘所开发的 flexible.js 文件来实现根据不同的视口宽度给网页中HTML根节点设置不同的font-size，具体JS代码如下：

h(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
  setRemUnit()
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

3. 单位转换

在项目开发的过程中，书写代码的尺寸要参照设计稿尺寸，而设计稿中往往都是以 px 为单位的，所以就需要用到尺寸转换；

公式：rem单位的尺寸 = px单位数值 / 基准根字号

六、LESS学习

Less的学习就是为了方便CSS代码的开发，而Less是一个CSS预处理器，Less文件后缀是 .less ；

优点：扩充了 CSS 语言，使 CSS 具备一定的逻辑性和计算能力；

注意：浏览器并不能识别Less代码，所以还是需要用到vscode中的插件来通过Less文件保存自动生成CSS文件，即：

1. 注释语法

① 单行注释

语法：// 注释内容
快捷键：ctrl + /

② 块注释

语法：/* 注释内容 */
快捷键： shift + alt + A

2. 运算语法

运算：

加、减、乘直接书写计算表达式；
除法需要添加 小括号 或 .；

.box {
    width: 100 + 10px;// 加法
    width: 100 - 20px;// 减法
    width: 100 * 2px;// 乘法
    width: (68 / 37.5rem);// 除法——小括号
    height: 29 / 37.5rem;// 除法—— . 
}

注意：表达式存在多个单位以第一个单位为准；

3. 后代选择器生成

嵌套：

作用：快速生成后代选择器。
语法：

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

4. 变量设置

通常使用的方法就是把某个属性提前存储到一个容器，设置属性值为这个容器名；

变量：

存储数据，方便使用和修改；

语法：

定义变量：@变量名: 值；
使用变量：CSS属性：@变量名；

// 1. 定义. 2.使用
@colora:green;

.box {
    color: @colora;
}
.father {
    background-color: @colora;
}

5. 文件导入

导入: @import “文件路径”，如代码所示：

@import './小柴less.less';

6. 文件导出

① 方法一：配置EasyLess插件，实现所有Less有相同的导出路径；

具体步骤：

 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

在这里插入图片描述
② 方法二：控制当前Less文件导出路径；

具体步骤：

Less文件第一行添加如下代码, 注意文件夹名称后面添加【/】

代码如下：

// out: ./qqq/daqiu.css

7. 禁止导出

在项目开发的过程中，往往公共样式单独的Less文件不用选择导出，因为每当页面样式代码中引入公共样式的时候，就会对应的Less文件保存就会自动生成公共样式的代码在对应的CSS样式文件中；

具体方法：在less文件第一行添加；

// out: false

七、VW/VH方案

VW/VH方案同REM方案一样，都是目前多数企业都在用的一种解决移动适配的主流方案，它也是一种尺寸单位，但是相比于REM方案，它的使用会更加方便，其解决适配问题的效果也是：

等比缩放：根据屏幕宽度不同，网页元素的尺寸也不同；

都属于相对单位：相对视口的尺寸计算结果；
① vw：viewport width

1vw = 1/100视口宽度；

② vh：viewport height

1vh = 1/100视口高度；

1. vw单位尺寸

对于vw单位尺寸：

① 确定设计稿对应的vw尺寸（1/100视口宽度）；

具体步骤：查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）

② vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )；

Less代码样例：

.box {
    width: (68 / 3.75vw);
    height: (29 / 3.75vw);
    background-color: pink;
}

2. vh单位尺寸

对于vh单位尺寸：

① 确定设计稿对应的vh尺寸（1/100视口高度）；

具体步骤：查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸（1/100 视口高度）

② vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )；

Less代码样例：

.box {
    width: (68 / 6.67vh);
    height: (29 / 6.67vh);
    background-color: pink;
}

3. 禁止混用

在一个项目的开发过程中，是不会被要求出现vh和vw混合使用的，因为vh是1/100视口高度，在面对市场上的全面屏设备，其视口高度尺寸较大，如果混用就极可能会导致网页盒子变形，从而影响整个网页的呈现效果；

总结

对于移动适配的开发过程中，到底是该使用REM方案还是VW/VH方案呢？

其实，对于这个问题，主要还是看公司项目的需求，因为REM方案的主流，但VW/VH方案是趋势，在技术不断更新的时代上，能够处理问题的方案自然都是好方案，具体怎么用，还是看产品需求，但是对于这两种方案的区别，大致可以理解以下几点：
在这里插入图片描述

以上就是所要介绍的移动端Web基础学习的第二节内容，后续即将更新移动Web的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下CSS进阶学习的文章内容，再结合之前所介绍的CSS基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！

努力学前端的小柴

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
11
评论
Web前端系列技术之移动Web开发（从基础开始）②

对于移动适配的开发过程中，到底是该使用REM方案还是VW/VH方案呢？以上就是所要介绍的移动端Web基础学习的第二节内容，后续即将更新移动Web的学习目标。有兴趣可回顾一下CSS进阶学习的文章内容，再结合之前所介绍的CSS基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！
复制链接

扫一扫