HTML+CSS：rem、vw / vh移动适配、媒体查询

已于 2023-06-05 11:08:08 修改
阅读量3.6k 收藏 13
点赞数 1
分类专栏： HTML5+CSS 文章标签： html css 前端
于 2022-10-18 16:42:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43472877/article/details/127382840
版权

文章目录

一、长度单位

  • rem ：目前多数企业在用的解决方案
  • vw/vh：未来的解决方案

二、rem单位

  • 相对单位
  • rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML字号大小
    在这里插入图片描述在这里插入图片描述

2.1 rem使用媒体查询

手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
使用媒体查询

  • 媒体查询能够检测视口的宽度，然后编写差异化的CSS 样式
  • 当某个条件成立, 执行对应的CSS样式

在这里插入图片描述

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

2.2 rem移动适配方案

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10
在这里插入图片描述
rem单位的尺寸=px单位数值/基准根字号
如68px的单位，在375width的页面中，rem单位为：68/37.5

思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？
答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个
解决方案 flexible.js

2.3 使用flexible.js

使用flexiblejs配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
已自动适配媒体查询

  • flexible.js是手淘开发出的一个用来适配移动端的js框架
  • 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
    在这里插入图片描述在这里插入图片描述

2.4 使用less 计算rem

在这里插入图片描述

三、vw / vh

相对视口的尺寸计算结果

  • vw：viewport width
    1vw=1/100视口宽度
  • vh：viewport height
    1vh=1/100视口高度

3.1 vw单位尺寸

vw单位的尺寸=px单位数值/(1/100视口宽度)

视口iphone678 375 * 667
适配 68px * 29px 的盒子使用vw
在这里插入图片描述

3.2 vh单位尺寸

vh单位的尺寸=px单位数值/(1/100视口高度)

视口iphone678 375 * 667
适配 68px * 29px的盒子使用vh
在这里插入图片描述

3.3 100%视口适配

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

3.3 使用Less

在这里插入图片描述

四、媒体查询

媒体查询（Media Query）是CSS3中的一个模块，它允许我们根据设备的不同特征（如屏幕大小、分辨率、方向、颜色等）来应用不同的样式。
通过使用媒体查询，我们可以为不同设备或屏幕尺寸设计出针对性的样式，实现响应式布局。

媒体查询语法通常包括一个媒体类型和一个或多个限制条件。例如：

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768像素时应用这里定义的样式 */
}

这段代码表示当屏幕宽度小于等于768像素时应用其中定义的样式。在上述例子中，screen指定了该媒体查询只适用于屏幕设备，而(max-width: 768px)则是限制条件，指定了最大宽度为768像素。

  • 媒体特性常用写法
    max-width
    min-width
    在这里插入图片描述
  • 完整写法
    在这里插入图片描述
    在这里插入图片描述

根据设备宽度的变化，设置差异化样式

在这里插入图片描述

如果检测到视口宽度小于768px, 认为是手机端, left隐藏

在这里插入图片描述

link外链式CSS引入

在这里插入图片描述

在这里插入图片描述

_七七
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解rem 适配布局
09-22
当今手机种类繁多，所以不可能每一款手机都要写一套布局样式，rem 就是用来自适应布局的，本文就详细的介绍了rem 适配布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
09-24
主要介绍了css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况的相关资料,需要的朋友可以参考下
vh和vw是什么单位？
热门推荐
HXR1984的博客
04-16 1万+
在css3中，vh和vw是视口单位，是相对长度单位。 文章目录前言一、视口单位（ Viewport units )1.在pc端2.在移动端二、常见单位及使用1.常见单位2.使用 前言 提示：以下所有内容，仅为个人经验总结，非专业解释 在学习css时，除了px像素，我们还经常遇到vh和vw这两个单位，那这两个单位具体是什么呢，怎么使用呢？ 一、视口单位（ Viewport units ) 想了解vh和vw，首先我们需要知道什么是视口。顾名思义，视口即为可视窗口。 分两种情况： 1.在pc端 视口指：p.
100vh问题及解决方案
最新发布
weixin_42560424的博客
06-03 398
100vh问题通常出现在移动端浏览器中，尤其是当你使用100vh设定元素高度时。这是因为移动端浏览器在显示视口高度时会包括地址栏和工具栏，这些栏在滚动时会隐藏，从而导致视口高度发生变化，影响布局。
css中的vw/vh与%
JYB2106056288的博客
11-02 1136
首先来说说vw/vh,将浏览器的宽高等分为100，浏览器视口的宽高单位。也就是说能智能的计算，包括外接显示器。可以实现元素的自适应宽高：随着浏览器视口变化而变化。的宽高作为100%。例如width:50%;height:50%;就是将父级元素宽度的50%设置为自己的宽度，将父级元素高度的50%设置为自己的高度。最后，希望自己的总结能让各位看官少走弯路吧！vw：若盒子的宽度设置为100vw,也就是浏览器视口宽度。其他博主讲这个的多，但是我觉得没有。
css实现自适应之单位vh
weixin_52418790的博客
12-26 2300
vh（Viewport Height）是前端开发中的一个动态单位，是一个相对于网页视口（Viewport）的单位。（与vh一起的还有vw（Viewport Width）） 在桌面端，视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 系统会将视口的高度分为100份，1vh就占用视口高度的百分之一（宽度同） 1vh等于视口高度的1%（1vw等于视口宽度的1%）。 vw和vh与百分比不同的是，百分比永远
HTML语言中vw的用法,css中vw是什么意思？
weixin_28867883的博客
06-07 4314
在css中，vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。CSS 单位是一种量度单位，包括尺寸单位和颜色单位。我们常使用向对单位，不会使得网页在不同的视图下造成布局混乱的情况。vw是Viewport's width的缩写形式，1vw永远等于当前视口宽度的百分之一。vw是一种视窗单位，也是相对单位。相对于视口的宽...
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
程序员成长指北
12-16 8591
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言当接到可视化大屏需求时，你是否会有以下疑问????如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？ 最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键...
纯css3使用vw和vh实现自适应的方法
09-24
相比媒体查询（Media Queries）和基于rem的动态计算，使用vw和vh单位可以避免响应式布局的断层现象，同时也无需JavaScript来动态调整根元素的字体大小。这种方法既保持了CSS的纯粹性，又实现了跨设备的完美适配。 ...
mediaQueries：一个练习CSS定位和媒体查询的小项目
02-22
媒体查询（Media Queries）是CSS3引入的一个强大功能，允许内容根据设备特性和视口尺寸进行适配，从而实现响应式设计。在这个名为"mediaQueries"的小项目中，我们将深入探讨CSS定位和媒体查询的使用，以创建适应不同...
浅析rem和em和px vh vw和% 移动端长度单位
12-13
- 在响应式设计中，通过JavaScript或CSS媒体查询(@media)更改根元素的字体大小，可以轻松地调整整个页面的缩放比例，适应不同设备的屏幕。 4. **vh（视口高度）** - vh是视口高度的百分比，1vh等于浏览器视口高度...
vh或vw单位
01-28
响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**： 像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...
css单位之——rem与vw/vh要点辨析
慢才后生
02-25 1659
rem： 1rem = 根元素html的font-size值。 当页面中所有元素都使用rem单位时，你只需要增加一小段js代码，通过监听设备尺寸来改变根元素的font-size值，那么所有元素就会按比例放大或者缩小，以此达到一套布局适应多种移动设备的目的。但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；弊端之二：html文件头部需插入一段j...
css vh使用
dency
08-13 6573
vh 说明： 相对于视口的高度。视口被均分为100单位的vh 示例代码： h1{ font-size:8vh; } 如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100 兼容性： 浅绿= 支持 红色= 不支持 粉色= 部分支持 IE Firefox Chrome Safari Opera iO...
视区单位vw, vh简介以及可实际应用场景
qq_43477721的博客
10-26 1929
基本概念 vw和vh：视口单位中的“视口”，桌面端指的是浏览器的可视区域，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vw等于视口宽度的1%。1vh等于视口高度的1%。 vmin和vmax：vmin为当前vw 和vh中较小的一个值；vmax为较大的一个值。 怎么证明 你猜 是浏览器内部宽度大小(window.innerWidth)？是整个浏览器的宽度大小(window.outerWidth)？还是显示器的宽度大小(screen.width)？ 上代码 <!DOCTYPE html>.
html和rem的适配
牛先森家的博客
05-10 1814
html和rem的适配： 1、rem基础 单位有px，pt，em，% em：相对大小（相对于父元素的font-size的值），比如div里面有一个p元素，当div设置font-size为12px，p元素的width：10em，此时p的width相对大小为120px； rem（root em）：是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小，比如...
vh和vw
weixin_63336496的博客
02-11 2207
Vmin:取Vw或Vh中较小的那一个。Vmax:取Vw或Vh中较大的那一个。是一种视窗单位，也是相对单位，是。是浏览器可视区域的最大高度。是浏览器可视区域的最大宽度。表示的百分比是相对于视口。的百分比相对于父元素，新增的一种自适应方案。（承载网页的区域），（2）当将页面内嵌于。Vw:视区宽度百分值。Vh:视区高度百分值。
前端HTML中vm和vh单位的使用
个人笔记
03-03 2395
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="t
postcss-px-to-viewport 适配vue
07-28
回答: postcss-px-to-viewport是一个用于将px单位转换为vw单位的PostCSS插件，适用于Vue项目。\[1\]要在Vue项目中使用postcss-px-to-viewport，首先需要安装postcss和postcss-loader，可以使用以下命令进行安装：npm i postcss postcss-loader -D。然后，安装postcss-px-to-viewport插件：npm i postcss-px-to-viewport -D。\[2\]接下来，需要在webpack配置中引入postcss-px-to-viewport插件，并进行相应的配置。可以参考以下示例代码：\[3\] ```javascript // 引入插件 const postcssPxToViewport = require("postcss-px-to-viewport"); module.export = { module: { rules: \[ { test: /\.css$/i, use: \[ "style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: \[ postcssPxToViewport({ viewportWidth: 320, // 设计稿宽度 unitPrecision: 5, // px转换后的小数保留位数 minPixelValue: 1, // 小于多少像素不转换 selectorBlackList: \["ignore-"\], // 有ignore-* 的类名不会被转换 }), \], }, }, }, \], }, \], }, }; ``` 以上是一个简单的webpack配置示例，其中postcss-px-to-viewport插件的配置参数可以根据实际需求进行调整。配置完成后，postcss-px-to-viewport插件会自动将CSS中的px单位转换为vw单位，实现适配效果。 #### 引用[.reference_title] - *1* [vue3使用postcss-px-to-viewport适配屏幕](https://blog.csdn.net/wangping146/article/details/126436251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [移动端适配 rem、postcss-pxtorem、postcss-px-to-viewport、vw vh](https://blog.csdn.net/xuyanl/article/details/129499800)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值