HTML5——响应式布局

最新推荐文章于 2024-07-14 17:05:44 发布

唐小狼

最新推荐文章于 2024-07-14 17:05:44 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html HTML5

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/51424748

html 同时被 2 个专栏收录

26 篇文章

订阅专栏

HTML5

20 篇文章

订阅专栏

本文介绍了响应式布局的概念及其在不同设备上的应用优势，并通过具体的CSS媒体查询示例展示了如何实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、响应式布局介绍

（1）响应式布局：
响应式布局是2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提供更加舒适的界面和更好的用户体验。
（2）优缺点：

优点
1) 面对不同分辨率设备灵活性强
2) 能够快捷解决多设备显示适应问题
缺点
1) 兼容各种设备工作量大，效率低下
2) 代码累赘，会出现隐藏无用的元素，加载时间加长

2、响应式布局基本实现

（1）CSS中的Media Query（媒介查询）：
设备宽高：device-width, device-height
渲染窗口的宽和高：width， height
设备的手持方向：orientation
设备的分辨率：resolution
（2）使用方法
外联
内嵌样式

1、示例

 
  
   <!DOCTYPE html>
  
  
   <html lang="en">
  
  
   <head>
  
  
       <meta charset="UTF-8">
  
  
       <title></title>
  
  
       <link rel="stylesheet" href="style.css" media="only screen and (max-width:640px)">
  
  
       <style>
  
  
           @media screen and (min-width:640px) {
  
  
               body{
  
  
                   background-color: coral;
  
  
               }
  
  
           }
  
  
       </style>
  
  
   </head>
  
  
   <body>
  
  
    
  
  
   </body>
  
  
   </html>

style.css

 
  
   *{
  
  
       margin: 0;
  
  
       padding: 0;
  
  
   }
  
  
   body{
  
  
       background-color: chartreuse;
  
  
   }

2、简单示例操作

 
  
   <!DOCTYPE html>
  
  
   <html lang="en">
  
  
   <head>
  
  
       <meta charset="UTF-8">
  
  
       <meta name="viewport" content="width = device-width,initial-scale=1">
  
  
       <title>01</title>
  
  
       <link rel="stylesheet" href="style01.css">
  
  
   </head>
  
  
   <body>
  
  
       <div class="heading"></div>
  
  
       <div class="container">
  
  
           <div class="left"></div>
  
  
           <div class="main"></div>
  
  
           <div class="right"></div>
  
  
       </div>
  
  
       <div class="footing"></div>
  
  
   </body>
  
  
   </html>

 
  
   *{
  
  
       margin: 0px;
  
  
       padding: 0px;
  
  
   }
  
  
    
  
  
   .heading,
  
  
   .container,
  
  
   .footing{
  
  
       margin: 10px auto;
  
  
   }
  
  
    
  
  
   .heading{
  
  
       height: 100px;
  
  
       background-color: chocolate;
  
  
   }
  
  
    
  
  
   .left,
  
  
   .right,
  
  
   .main{
  
  
       background-color: cornflowerblue;
  
  
   }
  
  
   .footing{
  
  
       height: 100px;
  
  
       background-color: aquamarine;
  
  
   }
  
  
    
  
  
   @media screen and (min-width:960px){
  
  
       .heading,
  
  
       .container,
  
  
       .footing{
  
  
           width: 960px;
  
  
       }
  
  
       .left,
  
  
       .main,
  
  
       .right{
  
  
           float: left;
  
  
           height: 500px;
  
  
       }
  
  
       .left,
  
  
       .right{
  
  
           width: 200px;
  
  
       }
  
  
       .main{
  
  
           margin: 0px 5px;
  
  
           width: 550px;
  
  
       }
  
  
       .container{
  
  
           height: 500px;
  
  
       }
  
  
   }
  
  
    
  
  
   @media screen and (min-width:600px) and (max-width:960px) {
  
  
       .heading,
  
  
       .container,
  
  
       .footing{
  
  
           width: 600px;
  
  
       }
  
  
       .left,
  
  
       .main{
  
  
           float: left;
  
  
           height: 400px;
  
  
       }
  
  
       .right{
  
  
           display: none;
  
  
       }
  
  
       .left{
  
  
           width: 160px;
  
  
       }
  
  
       .main{
  
  
           width: 435px;
  
  
           margin-left: 5px;
  
  
       }
  
  
       .container{
  
  
           height: 400px;
  
  
       }
  
  
   }
  
  
    
  
  
   @media screen and (max-width:600px) {
  
  
       .heading,
  
  
       .container,
  
  
       .footing{
  
  
           width: 400px;
  
  
       }
  
  
       .left,
  
  
       .right{
  
  
           width: 400px;
  
  
           height: 100px;
  
  
       }
  
  
       .main{
  
  
           margin-top: 10px;
  
  
           width: 400px;
  
  
           height: 200px;
  
  
       }
  
  
       .right{
  
  
           margin-top: 10px;
  
  
       }
  
  
       .container{
  
  
           height: 420px;
  
  
       }
  
  
   }