vw和rem适配

wwq
542 阅读3分钟

vw和rem适配

rem

概念

  1. 相对单位
  2. rem单位是相对于HTML标签的字号计算结果
  3. 1rem = 1HTML字号大小
  • 目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
/* 视口宽度320px，根字号为32px */
@media (width:320px) {
    html {
        font-size: 32px;
    }
}
/* 视口宽度375px，根字号为37.5px */
@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
  1. 实现在不同宽度的设备中，网页元素尺寸等比缩放效果

根据视口宽度，设置不同的HTML标签字号

书写代码，尺寸是rem单位

  1. 确定设计稿对应的设备的HTML标签字号 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

  2. rem单位的尺寸 N * 37.5 = 68 → N = 68 / 37.5 rem单位的尺寸 = px单位数值 / 基准根字号

  3. 使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

  4. flexible.js是手淘开发出的一个用来适配移动端的js框架。

  5. 可以根据不同的视口宽度给网页中html根节点设置不同的font-size。

  6. 下载vscode插件 px to rem & rpx (cssrem)

  7. 配置settings.json文件，添加 "cssrem.rootFontSize": 37.5,

  8. 重启vscode

vw

概念

  1. 实现在不同宽度设备中等比缩放的网页效果

  2. 相对单位

  3. 相对视口的尺寸计算结果

  4. vw：viewport width 1vw = 1/100视口宽度

  5. vh：viewport height 1vh = 1/100视口高度

  6. vw适配原理

实现在**不同宽度**的设备中，网页元素尺寸等比缩放效果

  1. 确定设计稿对应的vw尺寸 （1/100视口宽度） 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）

  2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 ）

  3. vh适配原理

  4. 确定设计稿对应的vh尺寸 （1/100视口高度） 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）

  5. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度

  6. 开发中，不会vw和vh混用 ，因为 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形 。

使用vw单位设置网页元素的尺寸 （vscode）步骤

  1. 下载vscode插件 px2vw
  2. 配置settings.json文件，添加 "px2vw.width": 375, 意思是设计稿的宽度 / 10
  3. 重启vscode

作用

  1. 实现在不同宽度设备中等比缩放的网页效果

使用vw单位设置网页元素的尺寸 步骤

  1. 下载vscode插件 px2vw
  2. 配置settings.json文件，添加 "px2vw.width": 375,
  3. 重启vscode

rem 和 vw / vh 的区别

remvw/vh
需要不断修改html文字大小省去各种判断和修改
需要媒体查询media将来(马上)趋势
需要 flexible.jsB站在用

使用媒体查询设置差异化CSS样式

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

  2. 当某个条件成立, 执行对应的CSS样式

  3. 写法

    @media (媒体查询) {                     
选择器 {
        css属性
    }
}

    @media (width:320px) {
    html {
        font-size:32px;
    }
}

实战演练笔记

  1. 图片标签间隙问题解决

    给img添加 vertical-align: middle;

avatar
文章
阅读
粉丝