对于前端开发中的几种布局方式的理解

一，静态布局（Static Layout）
在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置

二，弹性布局（Elastc Layout）
是CSS3引入的布局方式，其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：

flex-flow:< flex-direction>||< flex-wrap>
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-wrap: nowrap（初始值） | wrap | wrap-reverse
flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。
flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。
两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式

三，自适应布局（Adaptive Layout）
分别为不同的屏幕分辨率定义布局.可以看作是静态布局的一个系列。简言之看到的结果是页面里面元素的位置会变化而大小不会变化；

四，流式布局（Liquid Layout）
页面元素的宽度按照屏幕进行适配调整。看到的结果是页面中元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示

五，响应式布局(Responsive Layout)
1，例如做到移动端网站时就必须要在头部head标签中写入如下的meta标签：
< meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
name=“viewport” 名称=视图
width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

2，每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变，就会用到媒体查询（media query）
媒体查询是响应式布局的核心。

例如要在一个分辨率大于360px的终端上设置样式

 @media screen and(min-width:360px){
            #idName{
                border:1px solid red;
            }
        }

当兼容ipad和iphone视图时

/**ipad**/
  @media only screen and (min-width:768px) and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px) and (width:768px)

对于前端开发中的几种布局方式的理解

猜你喜欢