大屏 1920 布局: 响应式&自适应 vw+ rem + %

本文介绍了一种利用SCSS函数rem实现响应式网页设计的方法,适用于不同分辨率屏幕,包括全屏设计图1920x1080及最小尺寸1200x768。通过设置html的font-size为vw单位,并定义一个rem函数来转换像素值,确保了在不同设备上的一致布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:
1. 全屏, 设计图 1920 x 1080 ; min: 1200 x 768
2. 响应式&自适应

方法:

元素单位
htmlfont-size: 单位 vw
页面宽度、字体单位 rem
页面高度单位 % + rem, (不直接使用 vh, 因为无法直接实现 min-height 限制)

一、 scss 编译,
函数 rem($px) 可实现 1920 设计图上的宽度和字体, 不用计算,
1920 分辨率下 即 100 px 即 rem(100)

// 1920 字体 19.2px 即  1rem === 192px

$base_width: 1920;
$base_fontSize: 192;

@function rem($px){
  @return $px / $base_fontSize * 1rem;
}

html {
  font-size: ( $base_width / $base_fontSize) * 1vw;
  @media screen and (max-width: 1200px) {
    font-size: 120px;
  }
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 768px;
  background-color: #0b1b41; 
  background: url("../img/bg.png") center center no-repeat;
  background-size: 100% 100%;
}

二、具体用法
	在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值