响应式布局

越努力越幸运cm
105 阅读4分钟

CSS中媒体查询的作用和使用方法

  1. 媒体查询：为不同尺寸的屏幕设定不同的CSS样式
  2. 适合场景：根据不同的媒体类型（设备类型）和条件来区分各种设备（如、电脑、手机、平板等），并为同门定义不同的CSS样式，提升用户体验。
  3. 常用参数
属性名称作用
width、height浏览器可视宽度、高度
device-width设备屏幕的宽度
device-height设备屏幕的高度
  1. 使用方法

（1）@media

//a.在style内部使用
<style>
@media screen and (max-width: 992px) {
    body {
        background-color: blue;
    }
}
</style>

/*b.在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询 */
/* 当页面宽度大于等于 900 像素时应用该样式 */
<style media="screen and (min-width: 900px)">
    body {
        background-color: blue;
    }
<style>
/* 当页面宽度小于等于 600 像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
/*【注】

（2）@import

//【注】所有 @import 语句都必须出现在样式表的开头，而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式
@import url("css/screen.css") screen;   /* 引入外部样式，该样式仅会应用于电脑显示器 */
@import url("css/print.css") print;     /* 引入外部样式，该样式仅会应用于打印设备 */
body {
    background: #f5f5f5;
    line-height: 1.2;
}

【注】media可指定多种媒体类型，用逗号分隔，如media="screen,print"

flex的用法

flex容器：用来进行弹性布局，可以配合rem处理尺寸的适配问题.png

rem的作用和使用方法

  1. 概念：指相对于根元素的字体大小的单位
  2. 使用：根据屏幕大小自动改变字体大小
var c=()=>{
  let w = document.documentElement.clientWidth; //获取设备的宽度
  //设置字号
  let n = (20*(w/320)>40?40+"px":(20*(w/320)+"px"));
  document.documentElement.style.fontSize=n;
}
window.addEventListener("load",c);
window.addEventListener("resize",c);

相关案例

输入框布局

（1）效果：

image.png

（2）元素：

image.png

（3）样式：

image.png

长表单布局

（1）效果：

image.png

（2）元素：

image.png

（3）样式：

image.png

根据不同的设备跳转到不同的页面

var redirect = () => {
  //获取设备的信息
  let userAgent = navigator.userAgent.toLowerCase();
  //正则表达式，判断设备类型
  let device = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/;
  if(device.test(userAgent)){
    //跳转到移动端页面
    window.location.href = "mobile.html"
  }else {
    //跳转到PC端页面
    window.location.href = "pc.html"
  }
}

自适应布局——三列布局：两边固定，中间自适应

  • 布局特点:局部自适应（伸缩）
  • 涉及思路：控制局部变化
  //父元素
  #div0{
    display: flex;
  }
  #div0 div:first-child{
    background-color: yellow;
    flex: 0 0 50px;
  }
  #div0 div:nth-child(2){
    background-color: pink;
    flex: 1 1 auto;
  }
  #div0 div:nth-child(3){
    background-color: yellow;
    flex: 0 0 50px;
  }

响应式布局

  • 布局特点：确保一个页面在所有终端上都能显示较好的效果
  • 设计思路：使用%或rem作为单位，下面案例使用%

（1）效果：

image.png

（2）元素：

image.png

（3）样式：

a.设备宽度大于1000px

<link rel="stylesheet" href="big.css" media="(min-device-width:1000px)">

/* big.css */
*{
  margin: 0px;
  padding: 0px;
  background: #f5f5f5;
}
.layout{
  display: flex;
  flex-direction: column;
  width: 80%;
  margin:0 auto;
}
.top{
  width: 100%;
  margin: 0 auto;
  background-color: bisque;
  flex: 0 0 50px; /* 相当于height: 50px; */
}
.main{
  flex: 0 0 100%; /* 主轴为纵轴，为父元素高度的100% */
  display: flex;
}
.cont1{
  flex: 0 0 10%; /* 主轴为横轴，为父元素宽度的10% */
  background-color: #f5f5f5;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid white;
  border-right: 1px solid white;
}
.cont1 li{
  flex: 0 0 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid white;
}
.cont2{
  flex: 0 0 90%; /* 主轴为横轴，为父元素宽度的10% */
  background-color: #f5f5f5;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.cont2 li{
  flex: 0 0 30%;
  height: 120px;
  text-align: center;
  border-bottom: 1px solid white;
  background-color: rgb(189, 221, 222);
  margin-top:10px
}

b.设备宽度在400px和600px之间

<link rel="stylesheet" href="small.css" media="(min-device-width:400px) and (max-device-width:600px)">

/* small.css */
*{
  margin: 0px;
  padding: 0px;
  background: #f5f5f5;
}
.layout{
  display: flex;
  flex-direction: column;
  width: 100%; /* 不同之处 */
  margin:0 auto;
}
.top{
  width: 100%;
  margin: 0 auto;
  background-color: bisque;
  flex: 0 0 50px;
}
.main{
  flex: 0 0 100%; 
  display: flex;
  flex-wrap: wrap; /* 不同之处 */
}
.cont1{
  flex: 0 0 100%; /* 不同之处 */
  background-color: #f5f5f5;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid white;
  border-right: 1px solid white;
  align-content: flex-start; /* 不同之处 */
}
.cont1 li{
  flex: 0 0 30%; /* 不同之处 */
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid white;
}
.cont2{
  flex: 0 0 100%; /* 不同之处 */
  background-color: #f5f5f5;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.cont2 li{
  flex: 0 0 50%; /* 不同之处 */
  height: 120px;
  text-align: center;
  border-bottom: 1px solid white;
  background-color: rgb(189, 221, 222);
  margin-top:10px
}

rem弹性布局

  • 布局特点：为了保证在各种屏幕上的不失真，根据实际屏幕宽度做等比例换算
  • 作用：一套方案，使不同尺寸、分辨率的视口，都能呈现较好的效果
  • 设计思路：使用%或rem作为单位

课堂案例6-rem弹性布局_哔哩哔哩_bilibili

【注】%与rem区别

  • %：当浏览器的宽度或者高度发生变化时，通过%单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。
  • rem：相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化
avatar
文章
阅读
粉丝