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 文件
 <link rel="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=视口高度的百分之一;
  • 4
    点赞
  • 12
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

CYL❀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值