移动端页面布局

• 理想视口ideal viewport
  
• 多倍图的使用
• 移动端常见布局之一--流式布局

理想视口ideal viewport

我们可以对viewport进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局；就是布局视口和视觉视口的大小相同。
这个时候可以设置meta中的viewport;让网站在移动端有最理想的浏览与阅读宽度而设定
需要设置视口标签< meta>和初始化样式

• 初始化样式文件:csstools.github.io/normalize.c…
• < meta>视口适配标签：布局视口的宽度应该与理想视口宽度一致，设备多宽，布局就多宽

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性	简介
width	宽度设置的是viewport宽度，可以给device-width设置特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0数字
minimum-scale	最小缩放比，大于0数字
user-scalable	用户是否可以缩放，yes或no（1或0）

多倍图的使用

pc端和早期手机屏幕：1css像素=1物理像素，后期屏幕将更多的物理像素压缩在一个屏幕中，这时候要用更大的图然后调节图片的大小让其看起来更加清晰，一般以n倍数调整。
简单说就说图片被css调节放大后模糊不清晰，用一张大的图片调节到理想尺寸让其清晰

移动端常见布局之一--流式布局

流式布局: 是页面中元素的宽度按照屏幕分辨率自动进行适配调整,也就是我们常说的适配,它可以保证当前屏幕分辨率发生改变的时候,页面中的元素大小也可以跟着改变,所以流式布局是移动端开发常用的一种布局.

特点：通过将盒子的宽度设置百分比，让盒子根据屏幕的宽度来进行伸缩，达到自适应效果
缺点：

• 在过大或过小的屏幕中因为宽度自适应，但是字体和高度等固定大小在屏幕过大过小情况下会显示不协调
  
• 有些盒子需要计算百分比宽度

注意：
1、 需要定义max-width和min-width最大小宽度值
2、第一步都要将视口适配和初始化样式文件引入

代码示范：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">