当前位置：首页 > article >正文

响应式布局是什么?如何实现响应式布局

article 2024/11/15 17:45:07

响应式布局是一种布局方式，它可以根据不同设备的屏幕大小和分辨率自适应调整布局，从而使网页在不同设备上都能够正常显示。

实现响应式布局的步骤如下：

获取设备信息：

首先需要获取设备信息，包括屏幕尺寸、分辨率、屏幕宽度和高度等。可以使用JavaScript或CSS获取设备信息，也可以使用第三方库如PhoneGap或Sencha Touch来实现。

创建响应式布局：

根据获取的设备信息，创建响应式布局。可以使用CSS的@media属性来指定设备类型，例如@media only screen and (max-width: 768px) { … }表示在屏幕宽度小于768像素时使用响应式布局。

写法1:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询写法1</title>
  <style>
  /* 媒体查询的时候代码书写需要放在最后面,其次()里面没有;结尾 */
    div{
      width: 200px;
      height: 100px;
      background-color: red;
    }

    /* 当显示器的宽度在800-1200之间的时候此时div的背景颜色变成蓝色 */
    @media screen  and (max-width:1200px) and (min-width:800px){
      div{
        background: blue;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

写法2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询写法2</title>
  <!-- 当显示器的宽度在800以上的时候,执行demo.css文件 -->  
  <link rel="stylesheet" href="demo.css" media="screen  and (min-width:800px)">
</head>
<body>
  <div></div>
</body>
</html>