前端常见的适配方法
时间：2024-04-29 12:55:22 来源：网络cs 作者：纳雷武 栏目：卖家故事 阅读：
一、固定布局（pc端）（静态布局）
以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸（这种不太现实）
二、根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局）自适应布局
<script>// 分辨率大于等于1680，大部分为1920的范围情况下，调用此cssif(window.screen.width >= 1680){document.write('<link rel="stylesheet" href="css/index_1920.css">');}// 分辨率在1600-1680这个范围的情况下，调用此csselse if(window.screen.width >= 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样式表加载出来
三、媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />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表示不缩放 maximum-scale：[0,10] 最小缩放比例 maximum-scale: [0,10] 最大缩放比例 user-scalable: yes／no 是否允许手动缩放页面，默认值为yes语法：
/* 大屏幕 */@media only screen and (min-width:1200px) {对应的样式} /* 中等屏幕 */@media only screen and (min-width: 992px)and (max-width: 1199px) {对应的样式} /* 小屏幕 */ 页面大于 768px， 小于 991px 时显示的样式效果 @media only screen and (min-width: 768px)and (max-width: 991px) {对应的样式} /* 手机端显示 */ 屏幕小于 767px 时的样式 @media only screen and (max-width: 767px) {对应的样式}四、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└─js flexible.js2.引入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屏幕适配方案
1、vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配）
<meta name="viewport" content="width=device-width,initial-scale=1.0">2、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; } } 3、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.左侧固定右侧自适应-定位
2.浮动+触发BFC
3.flex布局
六、响应式布局
方案一：用比例控制大小
1.在网页代码的头部，加入一行viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 以下是相关的属性的解释：width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）height：和 width 相对应，指定高度initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例，1.0就是占网页的100%maximum-scale：允许用户缩放到的最大比例minimum-scale：允许用户缩放到的最小比例user-scalable：用户是否可以手动缩放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 的大小并不是固定的3.rem是指相对于根元素的字体大小的单位,目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。h1 { font-size: 32px; font-size: 2rem;}5.图片的大小也用百分比表示
img { width: 100%;} 1.也可以设置 max-width ，这样一来图片最大不会超过原始尺寸，避免图片由于放大而模糊 img { max-width: 100%; width: auto;}补充一个知识点：基于Vue的SPA如何优化页面加载速度
减小入口文件体积
减小入口文件体积，常用的手段是路由懒加载，开启路由懒加载之后，待请求的页面会单独打包js文件，使得入口文件index.js变小静态资源本地缓存
2.1 HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头2.2 Service Worker离线缓存开启GZip压缩
Nginx开启Gzip压缩功能， 可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度， 开启Gzip功能后，Nginx服务器会根据配置的策略对发送的内容, 如css、js、xml、html等静态资源进行压缩, 使得这些内容大小减少，在用户接收到返回内容之前对其进行处理，以压缩后的数据展现给客户。这样不仅可以节约大量的出口带宽，提高传输效率，还能提升用户快的感知体验, 一举两得; 尽管会消耗一定的cpu资源，但是为了给用户更好的体验还是值得的在nginx中配置文件http{}中这样写：http {....... gzip on; #开启gzip压缩功能 gzip_min_length 1k; #设置允许压缩的页面最小字节数; 这里表示如果文件小于10个字节，就不用压缩，因为没有意义，本来就很小 gzip_buffers 4 16k; #设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存 gzip_http_version 1.1; #压缩版本 gzip_comp_level 6; #设置压缩比率，最小为1，处理速度快，传输速度慢；9为最大压缩比，处理速度慢，传输速度快; 这里表示压缩级别，可以是0到9中的任一个，级别越高，压缩就越小，节省了带宽资源，但同时也消耗CPU资源，所以一般折中为6 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json; #制定压缩的类型,线上配置时尽可能配置多的压缩类型! gzip_disable "MSIE [1-6]\.";#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持） gzip_vary on; #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩 } 使用SSR服务端优化
阅读本书更多章节>>>>本文链接：https://www.kjpai.cn/gushi/2024-04-29/163458.html，文章来源：网络cs，作者：纳雷武，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
上一篇：上手GitHub Copilot让AI写代码，效率飞起！
下一篇：返回列表