vw + rem布局

3.4 vw + rem布局

确定基准值以常见的750px设计稿为例（宽度），根据vw单位和rem单位原理实现

在750px设计搞下，如果使用vw单位换算，可以理解成100vw = 750px，1px = 0.13333333vw；如果使用rem单位换算，预设1rem = 100px; 则100px = 13.333333vw

html{

font-size: 13.333333vw;

}

弊端 ： 不是很精确

```css

750px 100vw 1vw = 7.5px;

375px 100vw 1vw = 3.75px

以设计稿为准:

假设还是750px设计稿 750px=100vw 1px=0.1333vw;

预设字体基础值 100px 1rem = 100px = 13.33vw;

html {

font-size:13.33vw;

}

.box1 {

width: 0.4rem;

height: 0.8rem;

background: pink;

}

/*width:40px;

height: 80px; */

```

## 15.4移动端项目

### 项目介绍

#### 项目名称：

小U商城

#### 项目描述

小U商城是面向移动端的专业综合网上购物商城，我们要完成 首页、列表页、详情页等静态页面的制作

#### 技术选型

布局采取rem适配布局

#### 设计图尺寸

本设计图采用 750px 设计尺寸

#### 开发工具

- VScode

- 蓝湖
————————————————
版权声明：本文为CSDN博主「m0_74899852」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_74899852/article/details/129169528