zoukankan      html  css  js  c++  java
  • 网页布局分类

    自适应布局

    使用固定分割点进行布局,只有几种固定状态,如:768px,996px,1200px,元素位置变化大小不变;

    响应式布局

    每个主流分辨率下都有一个布局样式,虽然差异较小,但也有几百种不同状态,元素位置大小都会变化。

    布局按CSS单位划分

    1. 固定布局fixed        使用像素px                              稳定、可控(留白)
    2. 流式布局 fluid        使用宽度%,高度px限死              宽度适应各种设备(只屏幕宽度自适应)
    3. rem布局                 使用rem     结合媒体查询              适应不同分辨率(分辨率自适应)

     

    布局按css属性划分

    1. 栅格布局                   利用CSS属性   浮动宽度百分比实现      conatiner  row  column
    2. 伸缩布局flex            使用CSS3属性  display:flex                适用不同设备切换不同排版(移动端)

    布局按页面样式布局

    1. 自适应布局             使用媒体查询,写多个固定布局,随屏幕宽度用特定固定布局样式
    2. 响应式栅格布局      利用CSS属性 浮动宽度百分比  结合媒体查询实现
    3. 响应式布局             使用媒体查询@media   适用不同尺寸切换不同样式、排版(PC与移动端共用)

    流式布局细分

    1. 瀑布流布局             宽度固定,高度参差不齐
    2. 双飞翼布局             中间自适应,两侧固定(浮动布局)
    3. 圣杯布局                 中间固定,两边自适应

    响应式rem布局:rem结合媒体查询

    html {font-size : 20px; }

    @media only screen and (min- 401px){

        html {font-size: 25px !important; }

    }

    @media only screen and (min- 481px){

        html {font-size: 30px !important; }

    }

    @media only screen and (min- 641px){

        html {font-size: 40px !important;}

    }

    响应式栅格布局:container row column 嵌套结合媒体查询 (每行12列)

    container中嵌套row,row中嵌套column。

    将column设为浮动以及对应的宽度百分比。

    .container {
      padding: 0 15px;
      margin: 0 auto;
    }
      @media (min- 768px) {
      .  container { 750px;}
       }
      @media (min- 992px) {
     .   container { 970px;}
       }
      @media (min- 1200px) {
      .container { 1170px;}
      }
        .row{
          padding: 0 15px;
        }
        .col-xs-x, .col-sm-x, .col-md-x, .col-lg-x {
           padding: 0 15px;
        float: left;
         xx%;
     }

    <div class="container">

      <div class="row">

              <div class=" col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>

              <div class=" col-xs-12 col-sm-6 col-md-8 col-lg-3"></div>

      </div>

    </div>

     

  • 相关阅读:
    apex Error : Given no hashes to check 137 links for project 'pip': discarding no candidates
    源码编译pytorch-1.2.0
    proxychains
    git简单教程
    caffe ssd + cuda9.0
    ros+pcl error recoder
    硬盘挂载
    opencv3.4.1+ubuntu18.04+anaconda 源码编译
    从RocksDBStateBackend讲述Flink的State机制
    由Rocksdb状态后端引出的Tree的应用
  • 原文地址:https://www.cnblogs.com/surui/p/8414578.html
Copyright © 2011-2022 走看看