css3(四) web

CSS3响应式布局

响应式布局的优点

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定
的版本。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

1.响应式Web设计-Viewport

（1）定义 Viewport

viewport是用户网页的可视区域。（视区）

(2)、设置Viewport

<metaname="viewport"content="width=device-width,initial-scale=1.0">

width：控制viewport的大小，可以指定的一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）。

height：和width相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

2.响应式Web设计-网格视图

定义：基于网格设计的，网页是按列来布局的

(2)、创建响应式网格视图

首先确保所有的HTML元素都有box-sizing属性且设置为border-box。确保边距和边框包含在元素的宽度和高度间。

插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }

/*之后使用12列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比:100%/12列=8.33%。在每列中指定class，class="col-"用于定义每列有几个跨度*/

        .col-1 { 8.33%;}
        .col-2 { 16.66%;}
        .col-3 { 25%;}
        .col-4 { 33.33%;}
        .col-5 { 41.66%;}
        .col-6 { 50%;}
        .col-7 { 58.33%;}
        .col-8 { 66.66%;}
        .col-9 { 75%;}
        .col-10 { 83.33%;}
        .col-11 { 91.66%;}
        .col-12 { 100%;}
        .left,.right{
            float: left;
        }
　　　　　　/*所有的列向左浮动，间距(padding)为15px：添加内边距 需要box-sizing：border-box 不然会影响盒子大小*/

        [class*='col-']{
            padding: 15px;
        }
        .box:after{
            content: '';
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">

        <div class="left col-3" >abcasbdsadfgsdf</div>
        <div class="right col-9">113345666e23</div>
    </div>
    <div>ajdfklsjflkdsjflkdsjfkldsjflkdsjflkdsjflksdjflkdsjflk</div>
</body>