css实现响应式布局

一.什么是响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容;自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。cSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

二.响应式实现方式

• 媒体查询(下面具体讲解）
• 流体布局（float）
• 弹性布局（flex）
• 通过 JavaScript、JQuery 进行判断来显示不同的布局页面
• Bootstrap 等第三方框架

2.1 媒体查询

• 媒体查询（Media Query）是CSS3新语法。
• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 使用@media才能够实现页面响应式布局

语法：

@media[not|only] type [and][expr] (media feature){
 rules
}

• type媒体类型：all(所有设备)、screen(用于电脑屏幕，平板电脑，智能手机等。)

• media feature
  1）width(浏览器的窗口尺寸，可加min/max)
  2）device-width(设备的参数尺寸，可加min/max)

• min-width：最小宽度，在媒体查询中，宽度大于或者等于最小宽度时，就触发其CSS样式

• max-width：最大宽度，在媒体查询中，宽度小于或者等于最大宽度时，就触发其CSS样式
  注：
  1.一般都是先实现PC端页面，然后再去做其他设备的兼容（把媒体查询写在默认样式之后）
  2.设置宽度时，最好不要写死(px)，而是用%单位参照父元素的大小

2.2 使用媒体查询的方式

1.直接在 CSS 文件中使用

<style type="text/css">
  // 没有经过媒体查询限制的 CSS
    @media 类型 and (条件 1) and (条件 2){
    // 媒体查询生效才会执行的 CSS 
      }
style>

2.使用import导入

 // 当所有设备的宽度小于 980px 时，才会使用 import 导入 CSS 文件
@import url("css/media.css") all and (max-width:980px);

3.使用 link 链接，media 作为属性用于设置查询方式

// 当所有设备的宽度小于 980px 时，才会使用 link 链接 CSS 文件
 "stylesheet" href="css/media.css" media="all and (max-width:980px)" /> 

注：媒体查询的优先级与普通 CSS 完全相同，因此当使用媒体查询时，一定要将媒
体查询的样式放在默认样式之后，否则媒体查询会被默认样式覆盖，也就无法针对不同设备
进行变化

2.3案例

   * {
           margin: 0px;
           padding: 0px;
           box-sizing: border-box;
       }
       body {
           background-color: rgb(242, 242, 242);
       }
       nav {
           width: 100%;
           height: 40px;
           text-align: center;
           padding-top: 10px;
       }
       nav p {
           margin-top: 10px;
       }
       .content {
           width: 100%;
           margin-top: 40px;
       }
       .content>div {
           width: 50%;
           float: left;
       }
       .left img {
           width: 90%;
           height: 600px;
       }
       .right {
           /* background-color: aqua; */
           height: 850px;
           margin-left: -40px;
       }
       table {
           width: 100%;
           /* width: 300px;
           margin-bottom: 10px; */
       }
       table tr {
           width: 100%;
           /* margin-top: 20px;
            */
           height: 30px;
       }
       table tr td {
           font-size: 20px;
       }
       table tr td input:not([type=button]),
       table tr td select {
           width: 80%;
           height: 40px;
       }
       table tr td textarea {
           width: 80%;
       }
       table tr td input[type=button] {
           width: 100px;
           height: 40px;
           background-color: green;
       }
       @media screen and (max-width:600px) {
           .content>div {
               float: none;
               width: 100%;
               text-align: center;
           }
       }

 <nav>
       <h1>联系我们h1>
       <p>请填写信息：p>
   nav>
   <div class="content">
       <div class="left">
           <img src="../image/map.png" alt="">
       div>
       <div class="right">
           <table>
               <tr>
                   <td>联系人td>
               tr>
               <tr>
                   <td><input type="text" placeholder="请输入姓名..">td>
               tr>
               <tr>
                   <td>联系电话td>
               tr>
               <tr>
                   <td><input type="text" placeholder="请输入邮箱..">td>
               tr>
               <tr>
                   <td>测试td>
               tr>
               <tr>
                   <td><select name="city" id="city">
                           <option>北京option>
                           <option selected="selected">上海option>
                           <option>厦门option>
                       select>td>
               tr>
               <tr>
                   <td>留言td>
               tr>
               <tr>
                   <td><textarea id="contents" cols="30" rows="10" placeholder="反馈信息">textarea>td>
               tr>
               <tr>
                   <td><input type="button" name="" id="" value="提交">td>
               tr>
           table>
       div>
   div>

三.补充：单位

• px：像素（pixel）相对长度单位，，是相对于屏幕显示器分辨率而言的；
• em:如果自身有font-size，em相对于自己的font-size,如果自身没有font-size，em相对于父元素的font-size(任何浏览器默认字体大小都是16px，所有未经调整的浏览器都符合1em=16px)
• %：相对于父元素的宽度大小
• rem：相对于根元素（html）的字体大小

html {
 	font-size: 12px;
}

div {
   font-size: 2rem; /* 24px */
   width: 5rem;  /* 60px */
   background-color: skyblue;
}

• vw：视口的最大宽度，1vw=视口宽度的百分之一；
• vh：视口得最大高度，1vh=视口高度的百分之一；