css3_媒介查询

！！！做媒介查询页面大小时，一定要加：

1）当打印的时候，执行.noprint

概要Scratch是麻省理工学院开发的供儿童或者初学者学习编程的开发平台。其通过点击并拖拽的
    方式，完成编程，可以使儿童或者成人编程初学者学习编程基础概念等。Scratch是一款积木式图形编程软件。 授
       权协议：GPLv2 开发语言：C/C++ 官网地址：https://scratch.mit.e 阅读全文


    打印

2）当屏幕缩小到一定值，改变样式宽高

#div1{
    width: 600px;
    height: 500px;
    background-color: lightblue;
}
@media screen and (min-width: 500px) and (max-width: 1000px) {
    #div1{
        width: 200px;
        height: 200px;
        background-color: lightsalmon;
    }
}

 缩小前

  缩小后

3）转手机版换行

.box{
    width: 800px;
    margin: 0 auto;
    border: 1px red solid;
}
.tilte_box{
    width: 100%;
    height: 50px;
    float: left;
    background-color:lightblue;
}
.body{
    width: 800px;
}
.col25{
    width: 25%;
    height: 50px;
    background-color: mediumpurple;
    float: left;
}
.col50{
    width: 50%;
    height: 50px;
    background-color: #5177ED;
    float: left;
}
.col75{
    width: 75%;
    height: 50px;
    background-color: #5177ED;
}
.col100{
    width: 100%;
    height: 50px;
    background-color: lightslategray;
    float: left;
}
@media screen and (min-width: 500px) and (max-width: 1000px) {
    .col25{
        float: none;
        clear: column;
    }
    .col100{
        float: none;
        clear: column;
    }.col50{
         float: none;
         clear: column;
    }

}

    

        

            
top
        
        

            
left
            
center
            
right
        
        

            
footer
        
    

缩小前

 缩小后

 4）手机倒着的屏幕视图

  initial-scale:设置页面的初始缩放值，为数字，可以带小数

  minimum-scale:允许用户的最小缩放值，为数字，可以带小数

  maxximum-scake允许用户的最大缩放值，为数字，可以带小数

   user-scalable:是否允许用户进行缩放，no/yes

    CSS选择器详解(一)常用选择器 类型选择器 类选择器 ID选择器 伪类 伪元素 通过类型选择器可以选择某一类型的html标签,并对其使用样式。 语法: selector {property1:value;pro...w
    port）：CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。

5）rem实现响应式布局

.box_item{
    width: 10rem;
    height: 10rem;
    background-color: lightblue;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
@media only screen and (max-width: 500px) {
    html {
        font-size: 10px;
    }
}

缩小前

 缩小后