怎么设置响应式布局的rem
时间: 2023-05-27 11:03:34 浏览: 85
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);
}
}
```
相关问题
vue3rem响应式布局
Vue 3 rem 响应式布局是一种基于 rem 单位实现的响应式布局方案。它可以根据不同的屏幕尺寸自适应调整元素的大小,并且支持动态改变页面字体大小。
具体实现步骤如下:
1. 在项目中引入 lib-flexible 库,该库可以将屏幕宽度等分为 10 等份,每份为 1rem。
2. 在页面中设置根元素的字体大小为屏幕宽度除以 10,即:document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
3. 在组件中,使用 computed 属性将需要设置 rem 值的属性进行计算转换,如:computed: { itemWidth() { return this.width / 75 + 'rem' } }。
4. 在样式中使用 rem 单位进行设置,如:.item { width: 2rem; height: 1rem; }。
这样做可以实现响应式布局,并且能够适配不同的屏幕尺寸和字体大小。
响应式网站如何设置rem
要设置 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 */
}
```
这样,当浏览器窗口大小改变时,文档的根元素字体大小也会随之改变,从而实现响应式布局。