适配不同屏幕分辨率下的布局方法:rem+less+媒体查询

最新推荐文章于 2023-08-13 20:38:35 发布
最新推荐文章于 2023-08-13 20:38:35 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： html vue 文章标签： less 媒体 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45372418/article/details/123061793
版权

一、rem

1.rem是一种页面单位,是相对单位,它和em比较类似,em是相对于父元素的字体进行比较,rem是相对于html的字体进行比较

2.算法: 在不算不同屏幕的条件下,1rem 就是我们所设置的html字体大小

在这里插入图片描述
在这里插入图片描述

在不同的屏幕下rem适配的原理就在于不同屏幕下的html字体不一样

1.html字体大小的计算公式:

html的fontSize = 屏幕尺寸 / 我们自己定义的页面宽度的份数（就是整个页面我们自己把他定义为多少分）

2.在pc端width一般是1920 height一般是1080 所以我们一般是把份数定为24份

so我们的html的fontSize就是 1920 / 24(份数) = 80px
这时我们的1rem = 80px注意这时在我们的1920px下

最低0.47元/天 解锁文章
学会沉淀呀
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rem适配
wangning的博客
07-06 2965
rem: (root em),rem是css中的一种相对长度单位。相对于根元素(即html元素)font-size计算值的倍数,区别于em,em是相对于父标签元素 配置规则： 设计稿是1920px ，约定将屏幕分成若干份数，如80份 1. 计算出的结果最好不要是小数，否则会影响精度 2. 1rem默认的px大小不要太离谱 （1rem = 1920 /80 = 24px,意味着1rem===24px） 那么设备宽度与rem基准值比例为 80 。 1. 分为多少份 每一份的宽度就是一个rem的宽度 进行单位换
移动Web开发布局(流式布局、flex弹性布局、less+rem+媒体查询布局)
06-22
本文将深入探讨流式布局、Flexbox弹性布局以及Less+REM+媒体查询布局策略，这些都是现代移动Web开发的关键知识点。 首先，我们来了解流式布局。流式布局是一种基于百分比宽度的布局方式，它允许网页内容根据浏览器...
数据大屏rem适配方案
u014645827的博客
07-21 1801
大屏适配方案
前端PC端适配，网页端适配
weixin_43239880的博客
04-13 4784
前端PC端适配，网页端适配,分辨率都要等比缩放1.安装 flexible.js (建议放到本地) 2.使用 **postcss-pxtorem**插件
前端rem适配(自适应布局)
Reset_Xc的博客
03-30 3852
前端rem适配
使用rem实现pc、移动端自适应布局
qfCSDN的博客
11-18 5541
可以根据设计稿宽度设置，获取到当前屏幕font-size大小，设置到蓝湖上，直接转换为rem进行布局即可。1rem的大小是通过html下的根字体大小（font-size）这个css属性告诉浏览器的。比如 ： 设置html当前font-size = 10px；那么1rem = 10px;（假如设计稿宽度是750），有一个预设的rem和px的比例。（假如是425px），那么他此时1rem的尺寸。2.获取用户浏览器的可视区域的宽度。（假如是1rem = 10px）
vue大屏可视化自适应完美方案
热门推荐
RocYuan
10-13 1万+
其实我们常见的1920*1080（1080P）、2k、4k...都是16：9的比例，在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕下展示，确定了实际屏幕比例，按照实际屏幕比例选择一个设计稿尺寸进行设计，设计稿出来后前端严格按照设计稿px进行开发页面即可（前提是按照下列适应方案进行开发）下列适应方案能够适应同比例下的所有分辨率屏幕。在做大屏可视化项目的时候，一般设计稿会设计成1920*1080，但是页面写死1920*1080在2k、4k等分辨率的屏幕下是不适配的。
html5 移动界面 lex + rem + + flexible.js + LESS
03-20
"html5 移动界面 lex + rem + flexible.js + LESS" 的组合，通过HTML5的先进特性、Flexbox的灵活布局、rem的响应式单位、flexible.js的适配处理以及LESS的代码组织，共同构建出适应各种设备、屏幕尺寸和分辨率的高...
前端：利用rem布局完成简易首页制作
07-09
在REM布局中，我们通常会用媒体查询来改变根元素的font-size，以适应不同屏幕尺寸。 例如，我们可以为小屏幕设备定义一个媒体查询： ```css @media (max-width: 768px) { html { font-size: 14px; /* 在小屏幕...
移动web开发，rem适配方案
10-31
本文将深入探讨移动Web开发中的rem适配方案，包括flexible.js+rem和less+rem+媒体查询两种常见策略。 首先，我们要了解移动端的基础知识。当前，大部分中国市场的手机浏览器内核基于Webkit，如UC、QQ和百度浏览器。...
rem布局实现不同分辨率移动终端的自适应、整体缩放
12-30
rem布局实现不同分辨率移动终端的自适应、整体缩放。另外界面UI也很不错哦！ 本附件相关博文地址：http://blog.csdn.net/irokay/article/details/78935838
前端移动Web第三天知识点：rem适配布局以及Less-课堂code.zip
04-18
这种方法解决了不同设备屏幕尺寸和分辨率下的显示问题，使得UI设计更易调整，同时减少了CSS代码的重复性。例如，我们可以设定html的font-size为屏幕宽度的某个百分比，这样所有用rem定义的元素大小都会随着屏幕尺寸...
vue2项目中实现字体自适应（使用px2rem插件将px转rem）
jiangjunyuan168的博客
11-25 3804
1、安装px2rem插件 npm add postcss-px2rem 2、配置 （1）在src下的utils目录中新建px2rem.js文件（没有utils就新建一个） px2rem.js // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750
vue2根据不同的电脑分辨率显示页面内容及不同设备适配显示
最新发布
weixin_40444253的博客
08-13 828
vue2根据不同的电脑分辨率显示页面内容及不同设备适配显示
VUE适配大小屏幕，超大屏幕方案
weixin_44389107的博客
12-02 9309
VUE适配大小屏幕，超大屏幕方案
rem为所有屏幕设置初始font-size
hu_mouse的博客
07-08 1697
(function (doc, win) {   var docEl = doc.documentElement,   resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',   recalc = function () {   var clientWid
rem适应不同屏幕的布局方案
weixin_44343449的博客
03-06 178
common.less /pc端的HTML字体大小默认为50/ html { font-size: 50px; } /假设将设计稿分为15份/ @no: 15; @media screen and (min-width: 320px) { html { font-size: 320px / @no; } } @media screen and (min-width: 360px) { html {...
等比例适配所有屏幕---css3 rem用法
weixin_30929295的博客
12-29 98
1，rem的定义 　　rem（font size of the root element）是指相对于根元素的字体大小的单位。rem是一个相对单位。和em非常相似。em（font size of the element）是指相对于父元素的字体大小的单位。两者之间的区别是一个计算的规则是依赖根元素一个是依赖父元素计算。 2，为什么要使用rem 　　rem可以实现强大的屏幕适配布局。屏幕适配有很...
rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题
Kuroko's Development Notes
10-13 1万+
实例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>废土坱行&a
vue项目PC端适配不同分辨率屏幕
05-31
3.使用CSS媒体查询：可以在样式文件中使用CSS媒体查询根据屏幕大小设置不同的样式，从而实现不同分辨率屏幕的适配。 4.使用rem单位：rem单位可以根据根元素的字体大小动态调整元素大小，可以在Vue项目中使用rem单位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值