几种页面布局方式的简单说明

Posted 2022-03-26 fengyuexuan

 

一、静态布局

最传统的web页面布局设计，常应用于PC端页面，即网页上的所有元素都统一使用px作为单位。这种设计页面的高度和宽度固定，超出浏览器的部分使用滚动条查阅。

特点：设计简单，但对于不同尺寸屏幕的兼容性不好，特别是移动端。

 

二、流式布局

页面元素以百分比的形式设置，元素宽高能够按照屏幕分辨率适应调整，但整体的布局不变。

特点：页面元素宽高可以自适应调整，但屏幕尺度跨度过大的情况下，页面不能正常显示。比如我们以百分比设置了按钮的宽度，但按钮上文字的大小是用px来设置的，当屏幕尺寸变大时，按钮被拉宽而字体大小没变，这样就会显得很不协调。

 

三、自适应布局

自适应布局主要是应用媒体查询@media针对不同尺寸和分辨率的设备设置不同的样式，就相当于创建了多个静态布局，每一个静态布局对应一个尺寸范围的屏幕。但对于同一个设备而言还是静态布局。

特点：屏幕尺寸或分辨率变化时，页面元素会跟着变化；但页面元素不会随着窗口大小的调整而发生变化。

 

四、弹性布局

弹性布局又称为盒子布局或flex布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；设为flex布局以后，子元素的float、clear和vertical-align属性将失效!

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器最核心的6个属性：

flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

项目的6个核心属性：

order, flex-grow, flex-shrink, flex-basis, flex, align-self

 

五、响应式布局

响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。

设计步骤:

1、设置meta标签

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

2、使用媒体查询和flex设置样式

body
    background-color: grey;
 
@media screen and (min-width:1200px)
    body
        background-color: pink;
    

@media screen and (min-width:700px) and (max-width:1200px)
    body
        background-color: blue;
    

@media screen and (max-width:700px)
    body
        background-color: orange;
    

3、使用rem单位设置font-size

html
    font-size:100px；//1rem=100px

完成后，就可以定义响应式字体：

@media (min-width:640px)bodyfont-size:1rem;
@media (min-width:960px)bodyfont-size:1.2rem;

4、使用max-width设置图片样式