前端适配方案

rem 单位实际上既不是响应式布局、也不是流式布局或弹性布局的概念。rem 是一种相对长度单位,它是相对于根元素(html 元素)的字体大小来计算实际长度的单位。

响应式布局、弹性布局和流式布局是网页设计中常用的三种布局方式,它们各自有不同的特点和应用场景。

  1. 响应式布局(Responsive Layout): 响应式布局是一种可以根据用户设备的屏幕尺寸和分辨率来动态调整页面布局的设计方法。通过使用媒体查询(Media Queries),开发人员可以为不同的屏幕尺寸设置不同的样式表,使网页在不同设备上都能够呈现最佳的显示效果。响应式布局可以适应各种设备,如桌面电脑、平板电脑和手机等。

  2. 弹性布局(Flexible Layout): 弹性布局是指通过相对单位(如百分比)和弹性盒子模型(Flexbox)等技术,在页面布局中使用相对尺寸和比例,使得页面中的元素能够根据屏幕大小或父容器的尺寸进行动态调整。弹性布局能够让页面更好地适应不同尺寸的屏幕,提高页面的灵活性和可扩展性。

  3. 流式布局(Fluid Layout): 流式布局是一种相对于固定像素的布局方式,通过设置元素的尺寸为百分比或em单位,使得页面中的内容能够根据浏览器窗口的大小进行伸缩和调整,从而实现页面的自适应。流式布局可以确保页面内容在不同分辨率的屏幕上都能够流畅显示,并且适应性更强。

总的来说,响应式布局主要侧重于适配不同设备,弹性布局注重于元素之间的相对排列和伸缩,而流式布局则侧重于页面内容的流动性和自适应性。在实际的网页设计中,通常会结合使用这三种布局方式,以达到更好的视觉效果和用户体验。

一、固定布局(pc端)(静态布局)

 以像素作为页面的基本单位,不管设备和浏览器宽度,只设计一套尺寸。(实际情况下没啥用)

二、根据不同的分辨率,加载不同的CSS样式文件(可切换的固定布局)自适应布局(CSS样式就得写几套,太麻烦了)

<script>const screeenWidth = window.screen.width// 分辨率大于等于1680,大部分为1920的范围情况下,调用此cssif(screeenWidth  >= 1680){document.write('<link rel="stylesheet" href="css/index_1920.css">');}// 分辨率在1600-1680这个范围的情况下,调用此csselse if(screeenWidth  >= 1600){document.write('<link rel="stylesheet" href="css/index_1600.css">');}// 分辨率小于1600的范围情况下,调用此csselse{document.write('<link rel="stylesheet" href="css/index.css">');}
</script>

注意这里的js一定要写在<head></head>标签里面,这样在加载页面内容之前,可以提前把css样式表加载出来。

三、rem布局(移动端)

1、媒体查询结合 rem 布局

媒体查询动态修改根元素的大小,使得 rem 一直在跟着变化,响应式就成功了。

2、flexble.js 和 rem 布局
简洁高效的 rem 适配方案 flexible.js
它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
我们要做的,就是确定好我们当前设备的html文字大小就可以了
下载地址:https://github.com/amfe/lib-flexible

实现详情
1.下载 flexible.js 放到项目目录里去

│  index.html
│
├─css
│      index.css
│      normalize.css
│
├─images
└─jsflexible.js

 2.引入flexible.js

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><!-- 引入我们的flexible.js 文件 --><script src="js/flexible.js"></script><title>Document</title>
</head>

index.css

body {min-width: 320px;max-width: 750px;/* flexible 给我们划分了 10 等份,所以应该是10rem */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;
}

3.完美的响应式弹性布局 vw + vh + rem 屏幕适配方案

a. vw、vh是基于视口的布局方案,故这个meta元素的视口必须声明。(解决宽高自动适配)

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

 b. rem布局-解决字体适配

rem布局原理:根据CSS的媒体查询功能,更改html根字体大小,实现字体大小随屏幕尺寸变化。

@media only screen and (max-width: 1600px) and (min-width: 1280px){html{font-size: 14px;}}@media only screen and (max-width: 1280px) and (min-width: 960px){html{font-size: 12px;}}@media only screen and (max-width: 960px){html{font-size: 10px;}}

 c. vw、vh、rem的使用

<template><div class="box"></div>
</template>
<style>.box{width:50vw;height: 20vh;line-height: 20vh;font-size: 1.5rem;margin:0 auto;font-weight: bold;background-color: rgba(255,255,255,0.8);}
</style>

上面代码中的50vw代表了此div占据视口宽度的50%、高度占据视口高度的20%,并且会随着视口的变化,进行自适应;字体则是1.5倍的html根字体大小,并且根据媒体查询进行字号变化。

四、弹性布局

  1. Flexbox(flex)布局

  2. CSS Grid 布局:CSS Grid Layout 是一种二维网格布局系统,通过将容器划分为行和列的网格来实现布局,可以灵活控制元素在网格中的位置和大小。与 Flexbox 不同,Grid 布局更适用于复杂的多列布局需求。

  3. table 相关属性:在一些特定场景下,可以使用 display 属性将元素设置为 table 相关的值(如 table、table-cell、table-row 等),模拟表格布局的方式来实现弹性布局效果。不过这种方法通常在处理复杂布局时会显得笨重。

  4. float 属性:虽然 float 主要用于实现文字环绕图片等效果,但在一些早期的布局设计中,也曾经利用 float 实现一定程度上的弹性布局效果。但是相比于 Flexbox 和 Grid 布局,float 的应用范围较为有限。

  5. calc() 函数:calc() 函数可以进行简单的四则运算,如计算元素的宽度或高度。结合百分比、像素等单位,可以实现更灵活的布局设计。

五、流式布局

  1. 使用百分比布局:设置元素的宽度、高度、内边距等属性为百分比,使其随着父容器的大小按比例进行调整。

  2. 流式图像(Fluid Images):将图像的宽度设置为百分比,让图像能够随着屏幕大小的变化而自适应调整大小。

  3. 流式文本(Fluid Typography):使用相对单位(如em、rem)设置字体大小,让文字在不同屏幕尺寸下保持良好的可读性。

六、响应式布局 

1.媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

 Link元素中的CSS媒体查询

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

在网页代码的头部,加入一行viewport元标签(CSS3必须设置)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">viewport:视口width=device-width: 告诉浏览器将页面宽度设置为设备的屏幕宽度,这样网页将会根据设备的屏幕大小来自动调整和适配布局,以确保内容在不同设备上展示时能够更好地呈现和适应。initial-scale:[0,10]  初始缩放比例,1表示不缩放minimum-scale:[0,10]  最小缩放比例,最好不小于1maximum-scale: [0,10]  最大缩放比例,最好不小于1以上3个属性的值最好都控制在1-10,尽量往放大的方向走,小于1可能会造成布局的混乱user-scalable: yes/no  是否允许手动缩放页面,默认值为yes

语法:

/* 大屏幕 */
@media only screen and (min-width:1200px) {对应的样式
}/* 中等屏幕 */
@media only screen and (min-width: 992px)and (max-width: 1199px) {对应的样式
}/* 小屏幕 */ 
@media only screen and (min-width: 768px)and (max-width: 991px) {对应的样式
}/* 手机端显示 */
@media only screen and (max-width: 767px) {对应的样式
}

 2.用百分比去写元素的宽度,不要写绝对宽度

.mybox {width: 30%;
}这里需要注意div宽度的计算方法,CSS盒式模型的宽度设置有两种模式:
width = 内容宽度
实际总宽度 = width + padding + border
这种情况下设置了 width 后,内容宽度不变,而调整 padding 和 border 都会使得div的实际总宽度变化
width = 实际总宽度
width = 内容宽度 + padding + border
这种情况下设置了 width 后,div总宽度不变
可以通过设置 css 的 box-sizing 属性来控制
content-box:width = 内容宽度 (默认)
border-box:width = 实际总宽度

 3.让子元素撑起父元素的高度,而不要写绝对高度

 
.parent {width: 30%;
}
.child {width:100%;height:100px;
}

4.字体使用相对大小 “em” 或 “rem”

h1 {font-size: 2rem;
}1.浏览器默认字体为 16px ,2rem 即 2 * 16px = 32px2.em(font size of the element)是指相对于父元素的字体大小的单位,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,因此 em 的大小并不是固定的。/* 设置段落字体大小为 16px */
p {font-size: 16px;
}/* 设置段落内部元素的宽度为 2em */
p .inner-element {width: 2em; /* 宽度为当前字体大小的两倍,即 32px */
}/* 设置标题字体大小为 20px */
h1 {font-size: 20px;
}/* 设置标题的上下边距为 0.5em */
h1 {margin-top: 0.5em; /* 上边距为当前字体大小的一半,即 10px */margin-bottom: 0.5em; /* 下边距为当前字体大小的一半,即 10px */
}3.rem是指相对于根元素的字体大小的单位,目前,除了IE8及更早版本外,所有浏览器均已支持rem。
对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。h1 {font-size: 32px;font-size: 2rem;
}

 5.图片的大小也用百分比表示

 
img {width: 100%;
}也可以设置 max-width,这样一来图片最大不会超过原始尺寸,避免图片由于放大而模糊img {max-width: 100%;width: auto;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/774441.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用的AD规则设置

目录 规则编辑器&#xff1a; 间距规则&#xff1a; 线宽规则&#xff1a; 过孔规则&#xff1a; 铺铜设置&#xff1a; 生成制造过孔&#xff1a; 过孔之间间距&#xff1a; 最小阻焊层间距&#xff1a; 丝印到阻焊的距离&#xff1a; 丝印到丝印距离&#xff1a; 走…

【洛谷 P1101】单词方阵 题解(dfs深度优先搜索)

题目描述 给一 nn 的字母方阵&#xff0c;内可能蕴含多个 yizhong 单词。单词在方阵中是沿着同一方向连续摆放的。摆放可沿着 88 个方向的任一方向&#xff0c;同一单词摆放时不再改变方向&#xff0c;单词与单词之间可以交叉&#xff0c;因此有可能共用字母。输出时&#xff…

01使用调试工具

文章目录 前言一、用openocd打开单片机二、利用4444端口向单片机写入hex文件三、利用3333端口和gdb进行调试四、之前我出的问题总结 前言 之前写了一篇关于在linux下搭建stm32标准库的文章后&#xff0c;有一些小伙伴们还是出现了一些奇奇怪怪的错误&#xff0c;这一篇文章就是…

JDK21|借鉴了近十种语言,String终于变好用了

作者:鱼仔 博客首页: https://codeease.top 公众号:Java鱼仔 前言 要想看官方对于JDK21的更新说明&#xff0c;可以直接跳转到下面这个官方网站中 官网地址为&#xff1a;https://openjdk.org/projects/jdk/21/ JDK21是最新的LTS版本&#xff0c;里面添加了不少新的特性&…

Java常用Lambda表达式

定义&#xff1a; Lambda表达式是一种在编程语言中表示匿名函数的方法。它可以在需要函数作为参数的地方使用&#xff0c;并且可以简洁地表示一个函数的定义。Lambda表达式最初由函数式编程语言引入&#xff0c;但现在已经成为许多编程语言中的常见特性。 基本语法&#xff1a;…

14个Python自动化实战脚本

1、批量文件重命名神器在工作中&#xff0c;我们常常需要对大量文件进行批量重命名&#xff0c;Python帮你轻松搞定&#xff01; import os def batch_rename(path, prefix, suffix):for i, filename in enumerate(os.listdir(path)):new_name f"{prefix}{i:03d}{suffix…

YOLOv9改进策略:IoU优化 | Wasserstein Distance Loss,助力小目标涨点

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文独家改进&#xff1a;基于Wasserstein距离的小目标检测评估方法 Wasserstein Distance Loss | 亲测在多个数据集能够实现涨点&#xff0c;对小目标、遮挡物性能提升明显 &#x1f4a1;&#x1f4a1;&#x1f4a1;MS COCO和PASC…

Linux(CentOS)/Windows-C++ 云备份项目(服务器网络通信模块,业务处理模块设计,断点续传设计)

此模块将网络通信模块和业务处理模块进行了合并 网络通信通过httplib库搭建完成业务处理&#xff1a; 文件上传请求&#xff1a;备份客户端上传的文件&#xff0c;响应上传成功客户端列表请求&#xff1a;客户端请求备份文件的请求页面&#xff0c;服务器响应文件下载请求&…

科兴未来|创客天下·杭向未来 2024杭州市海外高层次人才创新创业大赛报名中!

为加快建设社会主义现代化国际大都市&#xff0c;吸引海外高层次人才及团队携高新技术项目来杭创新创业&#xff0c;经杭州市委、市政府同意&#xff0c;特举办“创客天下•杭向未来 2024杭州市海外高层次人才创新创业大赛”&#xff08;以下简称“大赛”&#xff09;。现就有关…

C# 类的操作

类的操作 C#类的创建等C# 中的构造函数C# 中的析构函数C# 类的静态成员 C#类的继承基类和派生类基类的初始化 C#类的创建等 C# 中的构造函数 C#构造函数 类的 构造函数 是类的一个特殊的成员函数&#xff0c;当创建类的新对象时执行。 构造函数的名称与类的名称完全相同&#…

【王道训练营】第3题 判断某个年份是不是闰年,如果是闰年,请输出“yes”,否则请输出“no”

文章目录 引言闰年初始代码代码改进改进1&#xff1a;添加提示信息改进2&#xff1a;代码格式改进3&#xff1a;变量命名 其他实现方式使用if-else语句使用函数使用三元操作符 结论 引言 在公历中&#xff0c;闰年的规则如下&#xff1a;如果某个年份能被4整除但不能被100整除…

Java回溯算法知识点(含面试大厂题和源码)

回溯算法是一种通过试错来解决问题的算法&#xff0c;它尝试分步解决一个问题。如果发现当前的步骤不能得到有效的解决方案&#xff0c;它将取消上一步或几步的计算&#xff0c;再尝试其他的解决方案。回溯算法通常用递归方法实现&#xff0c;适用于解决组合问题、划分问题、排…

基于SpringBoot的“原创歌曲分享平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“原创歌曲分享平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 平台功能结构图 平台首页界面图 用户注册界面…

nvic优先级溢出

nvic的抢占优先级大于当前的配置群组所要求的最大上限&#xff0c;则真正优先级为数值的溢出部分&#xff1b;如果溢出部分为0则循环为最大数据&#xff1a; 如上图所示&#xff1a;中断分组为2&#xff1a; 因此优先级因为0--3 TICK_INT_PRIORITY等于0xf即为15&#xff1b;与3…

【Java多线程】1——多线程知识回顾

1 多线程知识回顾 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记仓库&#x1f449;https://github.com/A-BigTree/tree-learning-notes 个人主页&#x1f449;https://www.abigtree.top ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star…

一些有深度的MySQL问题和答案

什么是数据库事务&#xff0c;并解释ACID属性是什么&#xff1f;如何确保事务的原子性、一致性、隔离性和持久性&#xff1f; 数据库事务是一组数据库操作的逻辑单元&#xff0c;要么全部成功执行&#xff0c;要么全部失败回滚。ACID是指事务的四个属性&#xff1a;原子性&…

《外观模式(极简c++)》

本文章属于专栏- 概述 - 《设计模式&#xff08;极简c版&#xff09;》-CSDN博客 模式说明 方案&#xff1a; 外观模式提供了一个统一的接口&#xff0c;简化了一组复杂子系统的访问方式。优点&#xff1a; 将客户端与子系统解耦&#xff0c;降低了复杂性。提高了代码的灵活性…

【3D目标检测】Det3d—SE-SSD模型训练(前篇):KITTI数据集训练

SE-SSD模型训练 1 基于Det3d搭建SE-SSD环境2 自定义数据准备2.1 自定义数据集标注2.2 训练数据生成2.3 数据集分割 3 训练KITTI数据集3.1 数据准备3.2 配置修改3.3 模型训练 1 基于Det3d搭建SE-SSD环境 Det3D环境搭建参考&#xff1a;【3D目标检测】环境搭建&#xff08;OpenP…

朋友圈运营攻略,还有多号群发朋友圈教程

为什么需要打造朋友圈&#xff1f; 私域朋友圈运营运营者和私域流量理论上其实就是“网友”的关系 要维持稳定的社交关系&#xff0c;做好私域流量运营&#xff0c;就必须持续地进行自身价值塑造&#xff01;而朋友圈就是最好的“战场” 打造优质朋友圈的关键点&#xff1a; …

RHCSA(红帽认证系统管理员)知识大全(超详细)

第一天复习笔记 常用的系统工作命令 1、echo命令:用于在终端设备上输出字符串或变量提取后的值 2、date命令:由于显示或设置系统时间和日期 参数作用%S秒(00~59)%M分钟(00~59)%H小时(00~23)%I小时(00~12)%m月份(1~12)%p显示出AM或PM%a缩写的工作日名称(例如:…