流式布局

小灰灰 2023-07-08 13:25 130阅读 0赞

# 流式布局（百分比布局/非固定像素布局） #

通过盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充
    为了避免页面无限拉伸对内容的影响，有时需要设置最高宽度max-width和最低宽度min-width；max-height,min-height**

## viewport（视口） ##

**浏览器显示内容的屏幕区域。布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport**)

layout viewport ：那些为桌面设计的网站也能在移动浏览器上正常显示的宽度（这是浏览器的一个默认值）
    visual viewport ：浏览器可视区域的大小
    ideal viewport：  能完美适配移动设备的viewport。即不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，显示的文字的大小是合适的。

**meta viewport 中的content有6个属性,如下：**

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>属性值</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>设置layout viewport的宽度，为一个正整数，不带单位，或者写字符串device-width</td> 
  </tr> 
  <tr> 
   <td>initial-scale</td> 
   <td>初始缩放比，大于0的数字</td> 
  </tr> 
  <tr> 
   <td>maximum-scale</td> 
   <td>最大缩放比，大于0的数字</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td>最小缩放比，大于0的数字</td> 
  </tr> 
  <tr> 
   <td>user-scalable</td> 
   <td>用户是否可以缩放，yes(1) or no(2)</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][20200226180612292.png]  
**meta标签作用：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放，一般情况下就这样写就可以了，其他属性不常用**

## 二倍图 ##

*  二倍图
    
    准备的图片比实际需要的尺寸大2倍，因为一般情况下iPhone6的尺寸为375px，图片最大750px够适应其他手机屏幕了，不会失真。
    
    图片的缩小，img标签直接用width和height控制，设置为100%自适应，背景图用background-size控制
 *  背景缩放background-size
    
    background-size：背景图宽度 背景图高度；只写一个参数，默认为宽度，高度会等比例缩放；单位是百分比，默认是父盒子的百分比宽高
    
    background-size:cover；背景图完全覆盖盒子，可能出现背景图片显示不全的情况
    
    background-size:contain；高宽等比例拉伸，当宽或高铺满了盒子，另一个就不再进行拉伸，可能出现部分空白区域

注：因为是百分比布局，通常不用确定数值设置宽高，所以经常使用弹性布局和网格布局来做，

[20200226180612292.png]: https://img-blog.csdnimg.cn/20200226180612292.png