前端常见的适配方法
Posted 是小橙鸭丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端常见的适配方法相关的知识，希望对你有一定的参考价值。
作为一个真正的前端攻城狮，我们经常会谈到web前端怎么做适配，然而平常经常做的事，一旦问起来突然好像脑子一片空白，只能想到rem、flex、媒体查询那些，因此想记录一篇文章以此警醒自己。
一、固定布局（pc端）（静态布局）
以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸（这种不太现实）
二、根据不同根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局）自适应布局
<script>
// 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 分辨率在1600-1680这个范围的情况下，调用此css
else if(window.screen.width >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css">');
}
// 分辨率小于1600的范围情况下，调用此css
else{
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.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屏幕适配方案
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 = 32px
2.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如何优化页面加载速度
常见的几种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压缩
}
4.使用SSR服务端优化
以上是关于前端常见的适配方法的主要内容，如果未能解决你的问题，请参考以下文章