移动适配效果-rem+媒体查询

最新推荐文章于 2024-09-09 22:16:15 发布
最新推荐文章于 2024-09-09 22:16:15 发布
阅读量105 收藏
点赞数
分类专栏： Web 文章标签： html 前端 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49553751/article/details/133375598
版权
本文介绍了rem单位作为相对单位在响应式设计中的作用，如何通过媒体查询检测视口宽度并调整CSS样式。重点提到了rem布局方案，如等分10份设置字号，以及淘宝开发的flexible.js库，用于根据不同视口大小动态调整`<html>`的font-size以实现移动端适配。
摘要由CSDN通过智能技术生成
  • rem单位，是相对单位
  • rem单位是相对与HTML标签字号计算结果
  • 1rem=1HTML字号大小

媒体查询

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

                   选择器{

                           CSS属性

                   }

      }

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

rem-flexible.js

  • flexible.js是手淘开发出来的一个用来适配移动端的js库
  • 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

注意

  • 移动端书写代码尺寸要使用rem
  • 计算68px是多少个rem(假设设计稿适配375px视口：rem数*37.5=68  rem=68/37.5)
救救孩子吧8༼⍤༽
关注
专栏目录
媒体查询+rem移动端布局
weixin_46567428的博客
04-12 742
媒体查询+rem布局移动端布局1.移动端基础2.视口3.二倍图4.移动端调试5.移动端常见布局6.移动端开发之rem布局方案？6.1 rem单位6.2 媒体查询6.2.1 什么是媒体查询？6.2.2 媒体查询的语法规范6.2.3 媒体查询 + rem实现元素动态大小变化6.2.4 引入资源 移动端布局 1.移动端基础 2.视口 viewport 3.二倍图 物理像素 像素比 4.移动端调试 chorme模拟手机调试工工具 5.移动端常见布局 现在市场上主要有两种布局方案： 单独开发移动端（
媒体查询+rem
weixin_46739117的博客
04-16 305
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 媒体查询一、格式二、rem1.介绍2.rem布局实现3.rem实现适配所有屏幕大小三.引入资源附加 一、格式 @media 媒体类型(all,print,screen,) 关键字(and,not,only) (媒体特性) { CSS-Code;} /*设置屏幕最大宽度为969px，最小宽度是540px时触发body属性 媒体查询书写时从小到大或者从大到小,页面文字布局会随着页面变化而变化*/ @media screen and (
媒体查询与rem
qq_52731478的博客
03-28 209
两者都用于设置字体大小，值都代表倍率，rem也可以用于设置盒子大小设置了em的元素字体大小依据其自身字体大小或者其父元素的字体大小进行等比例缩放；设置了em的元素字体大小依据html元素的字体大小进行等比例缩放。html默认字体大小为16px 最小渲染的大小为12px。
移动WEB开发之rem基础&媒体查询
黑马程序员官方博客
04-19 486
前端干货内容在黑马，本篇目录： 一、rem基础 1.1rem 单位 二、媒体查询 2.1 什么是媒体查询 2.2 语法规范 mediatype 查询类型 2.3 案例：根据页面宽度改变背景变色 2.4 媒体查询+rem实现元素动态大小变 2.5 引入资源（理解） 一、rem基础 1.1rem 单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-siz..
关于媒体查询和rem单位
qq_40992225的博客
10-25 1173
媒体查询(Media Query)是CSS3新增的语法。使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询。
移动端布局之Rem和媒体查询适配布局
m0_60264901的博客
10-29 929
前言 媒体查询（Media Query）是CSS3新语法。 使用 @media 查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 Rem和媒体查询适配布局优点： 1.页面布局文字随着屏幕大小变化而变化 2.流式布局和flex布局主要针对于宽度和高度的设置 3.屏幕发生变化的时候元素高度和宽度等比例缩放 Rem rem (root em)是一个相对单位，类似于em，em是父元素字体大小 不
rem+媒体查询+less——移动端适配方案（一）
qq_45516629的博客
03-15 639
一、rem单位 rem (root em)是一个相对单位，类似于em，em是相对于父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 em案例： <style> div { font-size: 12px; } p { /* 1. em相对于父...
移动web开发---rem适配案例---优惠券.rar
11-06
总的来说，这个“移动Web开发---rem适配案例---优惠券”旨在帮助开发者理解并掌握rem单位在移动适配中的应用，通过实例学习如何实现跨设备的优良用户体验。无论是公式法还是JavaScript法，都为我们提供了有效的解决...
移动Web开发布局(流式布局、flex弹性布局、less+rem+媒体查询布局)
06-22
在实际项目中，我们可以结合这些技术，如使用Less编写模块化的CSS，利用Flexbox构建响应式的组件布局，并通过REM和媒体查询来优化不同设备的显示效果。这样不仅可以提高开发效率，还能保证移动Web应用在各种环境下都...
手机端用rem+scss做适配的详解
09-27
通过以上步骤，可以灵活地利用REM单位结合SCSS来实现移动端页面的响应式适配，不仅提高了开发的效率，也保证了在不同设备上的显示效果。这种适配方法不仅限于移动端，也可以适用于需要适应不同屏幕尺寸的桌面端网页...
html5 移动界面 lex + rem + + flexible.js + LESS
03-20
在这个领域，"lex + rem + flexible.js + LESS" 是一套常用的组合技术，用于创建响应式、自适应和易维护的移动网页。下面将分别介绍这四个关键词及其在移动界面开发中的应用。 1. **HTML5**：HTML5 是超文本标记...
移动Web开发之 rem适配布局----苏宁首页案例制作
06-23
移动Web开发中的“rem适配布局”是一种针对不同屏幕尺寸和分辨率进行自适应设计的方法，主要应用于智能手机和平板电脑等移动设备。在这个“苏宁首页案例制作”中，我们将深入探讨如何利用rem单位来构建响应式的网页...
rem+媒体查询
m0_61973028的博客
04-11 1704
一、rem 1、什么是rem rem是和px、em一样的计量单位。px是确数值的计量单位，em和rem则是倍数计量单位。em是父元素字体大小的倍数单位，rem是根标签<html></html>字体大小的倍数单位。 2、rem的优势 当我们需要设置自适应式的子元素时，用rem配合媒体查询就很好实现。媒体查询附上如下 我们一般设备显示屏幕分为15份或者20份，以一份值的大小来设置HTML，font-size值。 二、媒体查询 1、什么是媒体查询 媒体查询可以简单的理.
rem使用 媒体查询
m0_63285774的博客
12-03 311
rem基础：rem是一个相对单位，rem的基准是相对于html元素的字体大小。rem可以通过修改html里面的文字大小来改变页面中元素的大小。 此时div的宽高就是150px，如果想要改变div的大小可以直接改变html中的文字大小。 使用rem单位后可以使一些不能自适应的元素，，达到当设备发生改变的时候等比例的适配当前的设备。 媒体查询可以根据不同的屏幕尺寸改变屏幕的样式。语法: 当屏幕的宽度小于等于800时屏幕的颜色为pink色，当屏幕的宽度小于等于500时屏幕的颜色为紫色。and将多个..
媒体查询+rem实现元素动态变化
rj2017211811的博客
02-03 409
1.概念 首先了解几个概念 (1)**px:**为绝对单位，设置了几像素就是几个像素，缩小屏幕宽度仍然是该像素 (2)em:相对父级的font-size的大小来说，比如有下列代码 <style> div{ font-size:12px } p{ width: 10rem; height:10.5rem; } </style> <body> ...
rem基础+媒体查询+Less基础
2302_80229106的博客
02-09 2154
按照从小到大来写，这样代码更简洁CSS-Code；...用@media开头 注意@符号...mediatype媒体类型将不同的终端设备划分成不同的类型，称为媒体类型值 解释说明all 用于所有设备print 用于打印机和打印预览。
移动web开发rem适配布局(rem+Less+媒体查询)，web可视化开发
2301_76232361的博客
04-06 834
点击这里即可免费获取，包括答案解析。[外链图片转存中…(img-cagzaOXz-1712381267693)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-rNhswQwu-1712381267693)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
HTML+CSS：rem、vw / vh移动适配、媒体查询
七七的博客
10-18 3769
使用flexiblejs配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。如68px的单位，在375width的页面中，rem单位为：68/37.5。手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？vw单位的尺寸=px单位数值/(1/100视口宽度)vh单位的尺寸=px单位数值/(1/100视口高度)适配 68px * 29px 的盒子使用vw。适配 68px * 29px的盒子使用vh。
HTML 揭秘：HTML 编码快速入门
最新发布
m0_53117341的博客
09-09 1071
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
使用Vue-cli与lib-flexible+rem实现移动端适配教程
4. 为了进一步优化跨设备适配，可以结合使用媒体查询(`@media`)来针对特定的屏幕尺寸做进一步的调整，确保在大屏和小屏设备上都有良好的用户体验。 5. 在某些情况下，可能还需要配置postcss插件如autoprefixer，以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值