响应式布局

响应式布局

优点：

1. 减少工作量，设计，代码，内容都只需要一份，多出来的工作量只是js脚本，css样式做一些改变

2. 节省时间

3. 每个设备都能得到正确的设计

缺点：

1. 会加载更多的样式和脚本资源

2. 设计比较难精准定位和控制 （细节处理不好 百分比）

3. 老版本浏览器兼容不好 （ie）

步骤：

1、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="HandheldFriendly" content="true">

2、
媒体查询，根据条件适配设备

原理：媒体查询

设计理念：

页面的设计和开发根据用户的设备尺寸来进行相应的响应和调整。

（一套页面可以适配不同的终端，设备，页面展示效果不同）

应用场景：

展示性的企业站（官网），个人博客，后台管理系统

屏幕分类：

大屏幕 大型电脑 >1200px

中等屏幕 小型电脑 992px-1200px

小屏幕 pad 768px-992px

超小屏幕 phone <768px

核心技术：

• 媒体查询/bootstrap框架

• 弹性盒子

• 自适应（百分比布局）

• 响应式图片

• 响应式文字

使用媒体查询（代码）：
分类：
一：移动端优先：
（要点：先写移动端尺寸，且使用min-with）

从上到下执行*/
        /* 
            <768px    一行显示2个   手机
            768-992   一行显示3个
            992-1200  一行显示4个
            >1200     一行显示5个
         */
        ul{
            display: flex;
            flex-wrap: wrap;
        }
        li{
            width: 50%;
            height: 100px;
            border: 1px solid red;
            box-sizing: border-box;
        }

        @media screen and (min-width:768px){
          
        }

        @media screen and (min-width:992px){
           
        }

        @media screen and (min-width:1200px){
          
        }

pc端优先：
（要点：先写移pc端尺寸，且使用max-with）

   ul{
             display: flex;
             flex-wrap: wrap;
   }
   
         li{
             width: 20%;
             height: 100px;
             border: 1px solid red;
             box-sizing: border-box;
         }

@media screen and (max-width:1200px){
   
}

@media screen and (max-width:992px){
  
}

@media screen and (max-width:768px){
   
}

响应式图片

给图片的父级设置%的宽度，给图片设置width：100%；
div{
            width: 60%;
            border: 1px solid red;
        }
        img{
            width: 100%;
        }