rem适配 采用媒体自查询

最新推荐文章于 2024-05-14 20:08:50 发布
最新推荐文章于 2024-05-14 20:08:50 发布
阅读量125 收藏
点赞数
文章标签： html tomcat 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68736646/article/details/126664450
版权

移动段适配媒体查询，需要注意的是执行顺序。

px：html中css的一个绝对单位；

em：相对于父元素的字体大小的单位；

rem：相对于根元素的字体大小的单位。

注意em和rem都是相对的单位 em是性对于父级字体大小而定（font-size： XXpx),rem是性对于根元素的字体大小（html）

简单的小例子：

XU-687
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全网最好用rem适配文件
01-05
全网最好用rem适配文件
【手写一个页面自适应】 媒体查询 布局 视口rem/em
李桥桉的博客
04-10 811
流式布局 =》 百分比布局 所有的东西都采用百分比完成媒体查询 rem em vw/vh布局只是一种手段 不要被他束缚布局的目的就是 =》 将设计稿 完美 展现在PC端 移动端 有一定的兼容性详细在后期。
@media媒体查询
2202_75549187的博客
12-09 697
@media媒体查询
这是媒体查询
csdn_jwdlh的博客
11-05 499
媒体查询什么是媒体查询背景介绍媒体查询的使用组成mediatype 查询类型关键字媒体特性媒体特性（拓展属性——了解）媒体查询语法规范 什么是媒体查询 背景 近几年整个社会发生了翻天覆地的变化，各种智能手机，pad，之类的移动端设备随处可见。那么，程序员界就刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢？ ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦
CSS3 Media媒体查询器用法总结（传说中自适应、响应式就靠它了）
GLyihu的博客
09-03 5418
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： 这段代码的几个参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0）   minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）     maximum-scale：允
媒体查询
ice_yr的博客
11-13 431
什么是媒体查询 媒体查询（Media Query）是CSS3新语法 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果实际、Android手机，平板等设备都用得到媒体查询 语法规范 @media mediatype and|not|only (media feature) { CSS-Code; } 用@media 开头 注意@符号 mediatyp
详解rem 适配布局
09-22
当今手机种类繁多，所以不可能每一款手机都要写一套布局样式，rem 就是用来自适应布局的，本文就详细的介绍了rem 适配布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS3中媒体查询结合rem布局适配手机屏幕
11-21
css3语法: （750px设计图的1rem = 100px） @media only screen and (min-width: 320px) and (max-width: 479px){ html { font-size: 42.67px !important; } } @media only screen and (min-width: 480px) and ...
移动web开发，rem适配方案
10-31
涵盖了移动web开发技术，多种移动web开发方案，例如flexible.js+rem适配、less+rem+媒体查询适配方案
移动端适配 使px自动转换rem
12-14
先安装postcss-pxtorem： npm install postcss-pxtorem –save-dev 进行安装 通过屏幕的变化，设置动态根元素 font-size ：   我写在vue的html中 function setRem () { let htmlWidth = document....
媒体查询与自适应
weixin_42977865的博客
10-06 1126
媒体查询 为了实现响应式布局，相当于增加了判断条件 min-width 大于等于 max-width 小于等于 媒体类型 all 适用所有的设备 print 适用于打印用纸或打印预览视图 screen 主要适用于电脑/手机/平板等智能设备屏幕 speech 适用于语音合成器 tv 电视设备 逻辑运算符 and 把多个媒体组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真 @media tv and (min-width: 700px) and (orientati
常见的媒体查询自适应分辨率区间
切图仔
04-02 1万+
@charset "utf-8"; /* CSS Document */ /*手机总体*/ @media screen and (max-device-width: 1025px) { body{background:blue;} } /*pc总体*/ @media screen and (min-device-width: 1026px) { body{background:r...
媒体查询常见媒体尺寸和设置
luoyu6的博客
10-31 7637
  @media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 起） */ @media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 起） */ @media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，7...
CSS媒体查询（@media）全面解析
热门推荐
顺其自然~专栏
05-02 2万+
随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很
media媒体查询自适应h5页面
我的个人博客
08-19 1609
media字体设置 html的默认字体:16px,在使用媒体查询的时候,会按照1rem = 100px来进行换算,按照1rem =100px来进行换算,10/16=0.625,就需要将html的字体大小设置为625%,即可适应多平台字体 html{ font-size: 625%; } 我们在写代码的时候,肯定不是仅仅是需要字体适应,还有一些其他的样式肯定也是需要适配不同的屏幕的,那么我们...
Vue学习v-html
最新发布
李长渊的博客
05-14 371
Vue学习v-html
学习Java的日子 Day45 HTML常用的标签
weixin_69595694的博客
05-10 1091
dl - 定义列表dt - 列表头dd - 列表体。
使用JavaScript日历小部件和DHTMLX Gantt的应用场景（二）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
05-10 665
本文将为大家介绍DHTMLX Suite UI库中的JavaScript日历小部件和DHTMLX Gantt的实际应用场景，欢迎下载最新组件体验！
react 移动端适配
09-01
1. 使用CSS媒体查询：通过在样式表中使用媒体查询，根据设备的宽度和屏幕密度，设置不同的样式规则。可以根据需要调整不同屏幕尺寸下的布局、字体大小等。 2. 使用响应式UI框架：像Bootstrap、Ant Design Mobile等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值