视口、媒体查询

视口

1、视口就是设备的屏幕能用来显示用户网页的那一块区域。
2、浏览器默认视口宽度
iphone:980
ipad:980
Android Samsung:980
Android HTC:980
IE:1024
BlackBerry:1024
3、meta标签设置视口

<meta name="viewport"
content="width=device-width,initial-scale=1.0，
maximum-scale=1.0，
user-scalable=0"/>

4、meta标签作用：让当前视口的宽度等于设备的宽度，同时不允许用户手动缩放。

媒体查询

1、语法

@media 设备名字 only(选取条件) and(设备选择条件)
{
css样式
}

2、样式表嵌套@media
3、link里面使用@media
<link rel="stylesheet"type="text/css media="all and(max-width:480px)"href=“iphone1.css”/>

弹性布局

1、display值为flex时，创建弹性布局
2、flex(伸缩性) 是flex-grow（伸缩性）、flex-shrink（收缩比率）和flex-basis（伸缩基准值）都缩写
一般写法如下：
flex: none等同于flex: 0 0 auto，表示宽度为原始宽度，不发生扩展或收缩。
flex: auto等同于 flex:1 1 auto,表示除了占据原先的宽度外，还要分配剩余宽度(包括扩展或收缩）
缩为最小宽度。
flex:0等同于flex:0 1 0%，表示收缩为最小宽度。
flex：1等同于Hex：1 1 0%，表示配所有宽度(包括扩展或收缩)。
3、全屏状态下

小于800px

  <!-- 弹性布局 -->
    <div class="flex">
        <div class="box item1">9</div>
        <div class="box item2">99</div>
        <div class="box item3">999</div>
    </div>

.flex {
    display: flex;
    /* 设置容器为弹性布局 */
    /* 设置内容不换行 */
    flex-wrap: nowrap;
    /* 设置对齐方式 */
    /* justify-content: center;  */
    /* 设置排列方向 */
    flex-direction: row;
}

.box {
    width: 50px;
    height: 50px;
    background-color: rgb(170, 235, 170);
    margin: 2px;
    border-radius: 20px;
}

.item1 {
    flex-grow: 1;
    flex-shrink: 1;
}

.item2 {
    flex-grow: 2;
    flex-shrink: 1;
}

.item3 {
    flex-grow: 1;
    flex-shrink: 1;
}


/* 当屏幕宽度小于800px，相对应的比率变成3：2：1 */

@media all and (max-width:800px) {
    .item1 {
        flex-grow: 3;
    }
    .item2 {
        flex-grow: 2;
    }
    .item3 {
        flex-grow: 1;
    }
}

多列布局

 <p class="first">
        你以为的终究是你以为，不是我以为，人生将促进中可见很少见一个， 树高蛋白 电视剧购买事故及时是SV施工这个比IG柴堆三国UI石膏板， 伴随扣除UI市场， 固定公司工会哈是个元素与三个黄金素个结婚信息化三个 搜狗欧小红进行合并 我就这个获得高速不古斯化工。
        <img src="../images/acorn.png"> 蝴蝶花叔叔好国与国给，与健康谷㽛IG第三个亏终于只看过成都应该吃火锅， 我喜欢成都，喜欢成都的安静，喜欢城市的喧嚣，成都里面有许多情怀，使 我喜欢上这个城市。上海有大都市的热闹与繁华，上海有自己的追求，有喜欢 的东西，上海东方明珠去上海一定有去打卡的，迪士尼乐园里面超级好玩，我喜 欢。 享受了一天的热闹与玩耍后，回到家里面躺在床上都不想动，应该太累了， 但是， 这一天却收获了快乐，疲惫感慢慢消失后，你就会有动力了，又是元气满满
        的一天。快乐又来了。
    </p>
    <p class="two">
        <img src="../images/acorn.png"> 喜欢吃东西是一件非常快乐幸福的事情，比如火锅、甜品、冰激凌、 街边小吃 等等。 这些东西都是非常好吃的，你会想到吃，你就会 非常快乐，最后再来一 杯奶茶， 那简直是完美至极。我觉得非常 漂亮完美。一切看起来都非常美妙。 快乐的开始， 一天美好从零食 开始，冲冲冲。
    </p>

.first {
    column-count: 3;
    column-fill: balance;
    column-rule: medium solid brown;
    column-gap: 10px;
    overflow: auto;
}

.two {
    column-width: 230px;
    column-fill: balance;
    column-rule: medium solid forestgreen;
    column-gap: 10px;
    overflow: auto;
}

.img {
    float: left;
    width: 200px;
    height: 150px;
    border: medium solid rebeccapurple;
    background-color: salmon;
    scroll-padding: 2px;
    margin: 2px;
}