现在移动端用的原来越多，而且屏幕尺寸也五花八门，对于前端开发工程师做适配来说，确实比较麻烦 。下面我介绍了四种常见适配布局方案：viewport缩放、rem单位和vw/vh单位、flex布局。viewport缩放适用于整体缩放，但无法控制局部；rem方案通过调整html字体大小实现响应式，适配过程较复杂但更灵活；vw/vh单位则直接关联屏幕尺寸，无需JS，但换算较为繁琐；Flex布局应用场景有限。每种方法都有各自特点，适用于不同场景。
一、viewport缩放方案
根据设计稿标准（750px宽度开发页面），写完之后页面和元素自动缩小，在写CSS时完全按照设计稿来（如750px设计稿），页面开发好后在head标签内加上：
<meta name="viewport"content="width=750, initial-scale=0.5">
上面的的代码例子是 750px的设计稿，适配 375px的屏幕宽度
initial-scale = 屏幕逻辑像素宽度 / 设计稿的宽度
为了适配其他屏幕，需要动态地设置initial-scale的值;
<script>const width = 750const adapter = ()=>{let scale = screen.width/widthlet content = `width=${width},inital-scale=${scale}`let meta = document.querySelector('meta[name=viewpoint]')if(!meta){meta = document.createElement('meta')meta.setAttribute('name',viewpoint)document.head.appendChild(meta)}meta.setAttribute('content',content)}mobileAdapter()window.onorientationchange = mobileAdapter // 移动端屏幕旋转</script>
特点：
开发流程比较简单。
只能做到页面整体放大缩小，对于不想缩放的元素无法控制。比如边框会在大屏手机下显示得很粗，小屏手机上显示得很细。
二、rem方案
rem是一个单位，1 rem是html根元素font-size的1倍大，因此只要调整根元素的font-size，就能实现页面的响应式布局。对于不想缩放的元素，比如边框，则可以依然使用px为单位。比如：
设置 html 的 font-size 为 100*屏幕宽度/设计稿宽度；
假设设计稿框是750px，一个盒子在设计稿上的标注是425px ，那么在写 CSS 时设置 div 的宽度是 4.25rem（计算时用设计稿标注值除以100），边框宽度为 1px；
<script> const WIDTH = 750 //如果是尺寸的设计稿在这里修改 const setView = () => { //设置html标签的fontSize document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px' } window.onresize = setView; // 如果窗口大小发生改变，就触发 setView 事件 setView() </script><style>.box {width:4.25rem;height:10rem;font-size:0.2rem;border:1px solid #ccc; /* 假设边框不需要变化，则写成px，如果要变，则写成rem */}</style><div class="box"></div>
特点：
适配原理稍复杂
需要使用 JS
设计稿标注的 px 换算到 css 的 rem 计算简单，编辑器有对应px2rem的插件
方案灵活，既能实现整体缩放，又能实现局部不缩放
使用sass库的时候：
上面JS部分 处理还是一样的
@function px2rem($px) {@return $px * 1rem / 100;}header {font-size: px2rem(28);}
rem这个方案，还有一个用法就是配合媒体查询的方式，这时候就不需要使用JS了，直接通过@media 判断屏幕大小，修改HTML的 font-size 初始大小，来控制其他元素的 rem的尺寸。
<style>* {margin: 0;padding: 0}/* 三档页面尺寸大于320字体大小为50 * 0.5px大于500时为75 * 0.5px大于800时为100 * 0.5px注意：* 0.5是因为我们把盒子.top内文字大小设置为了0.5rem,而rem是相对与html元素的文字大小计算的（元素文字大小 * html文字大小（默认16px）= 最终文字大小）*/@media screen and (min-width: 320px) {html {font-size: 50px;}}@media screen and (min-width: 500px) {html {font-size: 75px;}}@media screen and (min-width: 800px) {html {font-size: 100px;}}.top {height: 1rem;font-size: .5rem;color: #fff;background-color: green;text-align: center;line-height: 1rem;}</style><body><div class="top">购物车</div></body>
三、vw、vh 方案
vw表示屏幕1%的宽度，vh表示屏幕1%的高度。需要缩放的元素用vw、vh，不需要缩放的继续用px。
比如，设计师交付的设计稿宽度是 750px，设计稿上一个标题的 fontSize 标注尺寸是32px。(32/750)*100% = 4.27% ，即4.27vw。
假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .button { width: 16vw; /* 100vw*120/750 */ font-size: 3.73vw; /* 100vw*28/750 */ line-height: 6.4vw; /* 100vw*48/750 */ border: 1px solid #000; /*不需要缩放的部分用px*/ text-align: center; } </style></head><body> <div class="button">按钮</div></body></html>虽然不用写JS，但是换算vw比较麻烦。
可以使用CSS的calc 来计算：
<style>:root {--ratio: calc(100vw/750); //定义变量，1--ration对应设计稿的1px}.button {font-size: calc(100vw*28/750); /* 可以直接用calc */line-height: calc(100vw*48/750);width: calc(120*var(--ratio)); /* 也可以用calc配合var使用，IE不支持var */border: 1px solid #000; /*不需要缩放的部分用px*/text-align: center;}</style>
当然，也可以使用SCSS ：
@function px2vw($px) { @return $px * 100vw / 750;}.button { width: px2vw(120); font-size: px2vw(28); line-height: px2vw(48); border: 1px solid #000; text-align: center;}特点：
适配原理简单
不需要 JS 即可适配
设计稿标注的 px 换算到 css 的 vw 计算复杂
方案灵活，既能实现整体缩放，又能实现局部不缩放
四、弹性盒适配（合理布局）
以上三种适配方案，都是等比缩放，放到ipad上的时候，因为设计稿是以手机屏幕设计的，页面元素会很大很丑，有些场景下，并不需要页面正常缩放，有时候只需要合理的布局就可以了。
<meta name="viewport" content="width=device-width">
配置好 viewport后，后面使用flex布局。
页面中的布局是栅格化的，换了屏幕之后，到底有多宽有多高很难去做设置，整体都需要改变，所以需要整体的缩放。
头屏大图，宽度自适应，高度固定的话，对于不同的屏幕，形状就会发生改变（变形）。
宽度变化后，高度也要保持等比例变化。
以上所有的适配，都是宽度的适配，但是在某些场景下，也会出现高度的适配。
比如大屏幕，需要适配很多电视尺寸，要求撑满屏幕。
此时就需要考虑宽高都要vh去表示，中间的大块去自适应。
如果是小程序开发，或者是基于uniapp来来开发的话，都是建议在750px宽的设计稿下直接使用rpx单位，例如设计稿10px，那么就直接 写成10rpx，不需要做其他任何操作。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
