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

news/2024/10/17 14:28:23/

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

方法:

元素    单位
html    font-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%;
}


二、具体用法

å¨è¿éæå¥å¾çæè¿°


http://www.ppmy.cn/news/126470.html

相关文章

windows连接VNC设置分辨率为1920*1080pi

使用VNC Viewer连接Ubuntu18.04之后,分辨率一直不是1920*1080,所以就很不爽,查了一下资料,搞定了 环境:已经安装好了vnc viewer和vncserver 1.安装虚拟显示器的软件 sudo apt-get install xserver-xorg-core-hwe-18.04 sudo a…

虚拟机里的ubuntu设置1920x1080分辨率

在虚拟机安装完ubuntu之后,显示设置里面的默认是没有1920x1080这个选项的 解决方法: 首先打开终端,执行下面命令: xrandr获得当前显示器的名称为Virtual1 然后编辑/etc/profile文件 # 需要sudo,要不然没有写权限 …

vue始终保持1920*1080样式

1.在index.html中引入jq <script src"https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>2.写css /* html{ overflow-x: hidden; overflow-y: visible; } */body {width: 1920px;/* height: 1080px; *//* background: url(../images/bg.png) …

Centos7设置1920x1080分辨率

Centos7设置分辨率 步骤一&#xff1a; 添加自己想要修改的分辨率如cvt 1920 1080 60 步骤二&#xff1a; 复制cvt结果第二行中 ‘Modeline’ 后面的所有内容&#xff0c;并粘贴到xrandr --newmode 后面&#xff0c;即可新建一个分辨率&#xff1a; 例如 &#xff1a;xrandr…

VirtualBox如何设置1920x1080分辨率

引言 我的电脑屏幕是1920x1080&#xff0c;但是VirtualBox默认的分辨率是小于这个尺寸&#xff0c;导致每次开启虚拟机之后虚拟机的桌面只有我电脑屏幕中间的一部分&#xff0c;两边留黑&#xff0c;所以本文主要是解决这个问题。 操作步骤 VirtualBox默认分辨率是不可以选择…

Ultra-Fast-Lane-Detection测试1920*1080视频

项目地址&#xff1a;https://github.com/cfzd/Ultra-Fast-Lane-Detection issue中作者回答了很多训练数据集及检测其他视频的回答 作者知乎文章&#xff1a;https://zhuanlan.zhihu.com/p/157530787 仅修改demo程序以适用于1920*1080分辨率视频。测试使用&#xff0c;如需更…

1920像素的屏幕在部分浏览器(chrome,IE等)中只有1536px解决办法

1920像素的屏幕在部分浏览器&#xff08;chrome&#xff0c;IE等&#xff09;中只有1536px解决办法 在桌面右键->显示设置&#xff0c;将缩放改为100%。 PC端多屏适配方案请查看这篇文章&#xff1a;https://blog.csdn.net/qq_16687863/article/details/106449461

1920*1080 网页使用scale在其他分辨率或宽度下等比例缩放

一、效果图&#xff1a;1920*1080全屏及非全屏 二、效果图&#xff1a;2880*1800全屏及非全屏 三、代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content…