2023年6月21日发(作者：)

前端常见的适配⽅法作为⼀个真正的前端攻城狮，我们经常会谈到web前端怎么做适配，然⽽平常经常做的事，⼀旦问起来突然好像脑⼦⼀⽚空⽩，只能想到rem、flex、媒体查询那些，因此想记录⼀篇⽂章以此警醒⾃⼰。⼀、固定布局（pc端）（静态布局）以像素作为页⾯的基本单位，不管设备和浏览器宽度，只设计⼀套尺⼨（这种不太现实）⼆、根据不同根据不同的分辨率，加载不同的CSS样式⽂件（可切换的固定布局）⾃适应布局这⾥要特别注意：注意这⾥的js⼀定要写在标签⾥⾯，这样在加载页⾯内容之前，可以提前把css样式表加载出来三、媒体查询媒体查询可以让我们根据设备显⽰器的特性（如视⼝宽度、屏幕⽐例、设备⽅向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和⼀个或多个检测媒体特性的条件表达式组成。link元素中的CSS媒体查询css3必须设置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 ⼀直在跟着变化，响应式就成功了。实现详情1.下载放到项⽬⽬录⾥去│ │├─css│ │ │├─images└─js 2.引⼊ Documenty { 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元素的视⼝必须声明。（解决宽⾼⾃动适配） 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的使⽤注意：上⾯代码中的50vw代表了 此div占据视⼝宽度的50%、⾼度占据视⼝⾼度的20%，并且会随着视⼝的变化，进⾏⾃适应;字体则是1.5倍的html根字体⼤⼩。并且根据媒体查询进⾏字号变化五、百分⽐布局 (流式布局)1.左侧固定右侧⾃适应-定位2.浮动+触发布局六、响应式布局⽅案⼀：⽤⽐例控制⼤⼩1.在⽹页代码的头部，加⼊⼀⾏viewport元标签以下是相关的属性的解释：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 = （font size of the element）是指相对于⽗元素的字体⼤⼩的单位，如当前对⾏内⽂本的字体尺⼨未被⼈为设置，则相对于浏览器的默认字体尺⼨，因此 em 的⼤⼩并不是固定的是指相对于根元素的字体⼤⼩的单位,⽬前，除了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优化⽅式1. 减⼩⼊⼝⽂件体积减⼩⼊⼝⽂件体积，常⽤的⼿段是路由懒加载，开启路由懒加载之后，待请求的页⾯会单独打包js⽂件，使得⼊⼝⽂件变⼩2. 静态资源本地缓存2.1 HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头2.2 Service Worker离线缓存3. 开启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服务端优化

2023年6月21日发(作者：)

前端常见的适配⽅法作为⼀个真正的前端攻城狮，我们经常会谈到web前端怎么做适配，然⽽平常经常做的事，⼀旦问起来突然好像脑⼦⼀⽚空⽩，只能想到rem、flex、媒体查询那些，因此想记录⼀篇⽂章以此警醒⾃⼰。⼀、固定布局（pc端）（静态布局）以像素作为页⾯的基本单位，不管设备和浏览器宽度，只设计⼀套尺⼨（这种不太现实）⼆、根据不同根据不同的分辨率，加载不同的CSS样式⽂件（可切换的固定布局）⾃适应布局这⾥要特别注意：注意这⾥的js⼀定要写在标签⾥⾯，这样在加载页⾯内容之前，可以提前把css样式表加载出来三、媒体查询媒体查询可以让我们根据设备显⽰器的特性（如视⼝宽度、屏幕⽐例、设备⽅向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和⼀个或多个检测媒体特性的条件表达式组成。link元素中的CSS媒体查询css3必须设置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 ⼀直在跟着变化，响应式就成功了。实现详情1.下载放到项⽬⽬录⾥去│ │├─css│ │ │├─images└─js 2.引⼊ Documenty { 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元素的视⼝必须声明。（解决宽⾼⾃动适配） 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的使⽤注意：上⾯代码中的50vw代表了 此div占据视⼝宽度的50%、⾼度占据视⼝⾼度的20%，并且会随着视⼝的变化，进⾏⾃适应;字体则是1.5倍的html根字体⼤⼩。并且根据媒体查询进⾏字号变化五、百分⽐布局 (流式布局)1.左侧固定右侧⾃适应-定位2.浮动+触发布局六、响应式布局⽅案⼀：⽤⽐例控制⼤⼩1.在⽹页代码的头部，加⼊⼀⾏viewport元标签以下是相关的属性的解释：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 = （font size of the element）是指相对于⽗元素的字体⼤⼩的单位，如当前对⾏内⽂本的字体尺⼨未被⼈为设置，则相对于浏览器的默认字体尺⼨，因此 em 的⼤⼩并不是固定的是指相对于根元素的字体⼤⼩的单位,⽬前，除了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优化⽅式1. 减⼩⼊⼝⽂件体积减⼩⼊⼝⽂件体积，常⽤的⼿段是路由懒加载，开启路由懒加载之后，待请求的页⾯会单独打包js⽂件，使得⼊⼝⽂件变⼩2. 静态资源本地缓存2.1 HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头2.2 Service Worker离线缓存3. 开启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服务端优化