<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
每个属性的详细先容：
width：#viewport 的宽度，可以指定为一个像素值，如：600，或者为分外的值，如：device-width （设备的宽度）。
height：#viewport的高度。
initial-scale：#初始缩放比例，即当浏览器第一次加载页面时的缩放比例。
maximum-scale：#许可浏览者缩放到的最大比例，一样平常设为1.0。
minimum-scale：#许可浏览者缩放到的最小比例，一样平常设为1.0。
user-scalable：#浏览者是否可以手动缩放，yes或no。
利用CSS3媒体查询媒体查询可以根据设备屏幕的宽度和高度来匹配不同的样式规则，从而实现相应式布局。通过设置不同的CSS样式，可以让页面在不同的设备上呈现不同的布局和样式。
@media screen and (max-width: 767px) { / 在宽度小于767px的设备上运用以下样式 / body { font-size: 14px; }}@media screen and (min-width: 768px) and (max-width: 1023px) { / 在宽度在768px到1023px之间的设备上运用以下样式 / body { font-size: 16px; }}@media screen and (min-width: 1024px) { / 在宽度大于即是1024px的设备上运用以下样式 / body { font-size: 18px; }}利用弹性布局
弹性布局可以根据设备屏幕的宽度自动调度元素的大小和位置，从而实现页面自适应。通过设置元素的flex属性，可以让元素按照一定的比例分配剩余空间，从而实现页面的自适应性。
.container { display: flex; flex-wrap: wrap; justify-content: space-between;}.item { flex: 1 1 300px; margin: 10px;}利用rem单位
rem单位是相对付根元素(html元素)的字体大小来打算的单位，可以根据设备屏幕的字体大小自动调度元素的大小和位置，从而实现页面自适应。通过设置根元素的字体大小，可以让全体页面的元素按照一定的比例进行缩放。
html { font-size: 16px;}@media screen and (max-width: 767px) { / 在宽度小于767px的设备年夜将根元素的字体大小设置为14px / html { font-size: 14px; }}@media screen and (min-width: 768px) and (max-width: 1023px) { / 在宽度在768px到1023px之间的设备年夜将根元素的字体大小设置为16px / html { font-size: 16px; }}@media screen and (min-width: 1024px) { / 在宽度大于即是1024px的设备年夜将根元素的字体大小设置为18px / html { font-size: 18px; }}
rem是CSS3新增的一个相对单位（root em，根em）,利用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修正根元素就成比例地调度所有字体大小，又可以避免字体大小逐层复合的连锁反应。
(其他)默认html的font-size是16px，即1rem=16px，如果某p宽度为32px你可以设为2rem。
常日情形下，为了便于打算数值则利用62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视详细情形而定。设置方法如下：
Html{font-size:62.5%(10/16100%)}
详细不同屏幕下的规则定义，即基数的定义办法：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下：
<script type="text/javascript"> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 (clientWidth / 320) + 'px';//个中“20”根据你设置的html的font-size属性值做适当的变革 }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);</script>利用vw、vh单位
vw和vh是根据设备的宽度和高度来决定的，设备的宽便是100vw，设备的高便是100vh，你设置的50vw便是相称于设备宽度的50%，你设置的100vh便是相称于设备高度的100%。牢记：不要把vw和vh弄稠浊了，如果你给元素宽度设置100vh，那么基本上(设备的宽小于高的情形)就会超出你的屏幕X轴涌现滚动条。如果你给元素高度设置100vw，那么就知足不了你想要把这个元素铺满全体设备高度的欲望了。一样平常情形下笔者宽度，和字体大小，旁边边距间距等都是用vw单位，高度，行高，高下边距间距等都是用vh单位。
利用方法：1. 将设计图放到PS里面，查看全体图片的宽度和高度，分别放在设计稿宽度和设计稿高度当中。（把稳是px单位哦）2. 然后量出你想要量的地方，将宽度和高度分别放置到量出的宽度和量出的高度当中。（把稳还是px单位哦）3. 然后点击换算按钮，就可以将换算出来的宽度和高度大小放置到你的代码当中了哦。（把稳是vw和vh单位哦）
一样平常移动真个布局可分为三个部分，头部->主体->tabbar的脚部。以是我们可以把项目的外层这样设置一下：
.body {width: 100%;height: 100%;display: flex;flex-direction: column;}/ 头部部分 /header {height: 10vh; / 固定的高度，根据你的设计图调度 /}/ 主体部分 /main {flex: 1; / 霸占页面剩余所有部分 /}/ tabbar脚部部分 /footer {height: 10vh; / 固定的高度，根据你的设计图调度 /}
使项目中的字体大小自适应：
html { font-size: 16px;}@media screen and (min-width: 375px) { html { / iPhone6的375px尺寸作为16px基准，414px恰好18px大小, 600 20px / font-size: calc(100% + 2 (100vw - 375px) / 39); font-size: calc(16px + 2 (100vw - 375px) / 39); }}@media screen and (min-width: 414px) { html { / 414px-1000px每100像素宽字体增加1px(18px-22px) / font-size: calc(112.5% + 4 (100vw - 414px) / 586); font-size: calc(18px + 4 (100vw - 414px) / 586); }}@media screen and (min-width: 600px) { html { / 600px-1000px每100像素宽字体增加1px(20px-24px) / font-size: calc(125% + 4 (100vw - 600px) / 400); font-size: calc(20px + 4 (100vw - 600px) / 400); }}@media screen and (min-width: 1000px) { html { / 1000px今后是每100像素0.5px增加 / font-size: calc(137.5% + 6 (100vw - 1000px) / 1000); font-size: calc(22px + 6 (100vw - 1000px) / 1000); }}
