响应式网站如何设置rem
时间: 2023-07-04 14:09:34 浏览: 63
要设置 rem 单位,需要先确定文档的根元素字体大小,即设置 html 标签的 font-size。一般来说,可以将其设置为屏幕宽度的 1/10,这样可以方便地计算 rem 值。
下面是一个示例:
```
html {
font-size: calc(100vw / 10);
}
```
这里使用了 CSS3 的 calc() 函数,将视口宽度除以 10 计算出一个基础的字体大小,然后将其应用到 html 标签上。
然后,在编写 CSS 样式时,可以使用 rem 单位来代替像素值。例如:
```
p {
font-size: 1.6rem; /* 相当于 16px */
margin-bottom: 1rem; /* 相当于 10px */
}
```
这样,当浏览器窗口大小改变时,文档的根元素字体大小也会随之改变,从而实现响应式布局。
相关问题
怎么设置响应式布局的rem
1. 在<head>标签中添加以下代码,设置HTML的font-size为设备宽度的1/10(假设设计稿宽度为750px):
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
html {
font-size: calc(100vw / 7.5);
}
</style>
```
2. 在CSS中使用rem作为单位,根据设计稿的尺寸设定元素的宽高和字体大小,例如:
```
.box {
width: 6rem;
height: 3rem;
font-size: 1.4rem;
}
```
3. 在需要响应式布局的地方使用@media查询,根据不同的屏幕宽度设置HTML的font-size大小,例如:
```
@media (min-width: 1024px) {
html {
font-size: calc(100vw / 10.24);
}
}
```
rem布局实现响应式页面布局介绍
rem布局是一种基于rem单位的响应式页面布局方式,它能够根据设备屏幕的大小和分辨率自适应地调整页面的布局和元素的大小。
在rem布局中,页面的宽度使用百分比来定义,而元素的尺寸则使用rem单位来定义。rem单位是指相对于根元素(html元素)字体大小的单位,因此可以根据根元素的字体大小来自适应地调整元素的大小。
为了实现rem布局,需要在页面的 head 部分添加以下代码:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
font-size: calc(100vw / 7.5); /* 7.5为设计稿宽度/100,例如设计稿宽度为750px,则100vw/7.5=10rem */
}
</style>
```
其中,视口的宽度设置为设备宽度,然后通过计算得出根元素的字体大小,以适应不同设备的屏幕大小和分辨率。
接下来,在样式表中使用rem单位来定义元素的尺寸,例如:
```css
.box {
width: 5rem;
height: 3rem;
font-size: 1.2rem;
}
```
这样就可以根据根元素的字体大小自适应地调整元素的大小,从而实现响应式页面布局。