Skip to content

Latest commit

 

History

History
255 lines (185 loc) · 5.31 KB

媒体查询.md

File metadata and controls

255 lines (185 loc) · 5.31 KB
Raw

媒体查询

利用媒体查询，可以实现在不同宽度的设备上，展示其适配的样式。

媒体查询语法

  • 媒体查询由一种媒体类型组成，并可包含一个或多个表达式（会被解析为布尔值）；

  • 当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

@media not|only mediatype and (expressions) {
  CSS-Code;
}
  • 常用的媒体类型：screen，用于计算机屏幕、平板电脑、智能手机等等。
  • 常用的表达式：min-width: 600px

另外，也可以针对不同的媒体使用不同的样式表：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

栗子—菜单的媒体查询

* {
  box-sizing: border-box;
}

/* 设置顶部导航栏样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 悬停时改变颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* 在宽度为 600 像素或更大的屏幕上，使菜单链接并排，而不是堆叠 */
@media screen and (min-width: 600px) {
  .topnav a {
    float: left;  
  }
}

// HTML 部分
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

媒体查询设置宽度范围

当浏览器的宽度在 600 到 900 像素之间。

@media screen and (max-width: 900px) and (min-width: 600px) {
  CSS-Code;
}

当宽度在 600 像素到 900 像素之间或大于 1100 像素。

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  CSS-Code;
}

元素模型(box-sizing)

值 说明 补充
content-box 高度/宽度 = 内容框 默认值
border-box 高度/宽度 = 内容框 + 内边距 + 边框 建议使用

将其应用于所有元素是安全且明智的：

* {
  box-sizing: border-box;
}

变量

CSS 变量可以访问 DOM，可以创建具有局部或全局范围的变量，更方便设置主体颜色。

var() 函数

var(name, value)
值 描述
name 变量名：以两条破折号开头
value （可选的）回退值：在未找到变量时使用

变量的声明及使用

/* 声明全局变量 */
/* :root 选择器匹配文档的根元素 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

/* 使用全局变量 */
body {
  background-color: var(--blue);
}

/* 声明并使用局部变量*/
/* 同名局部变量将覆盖全局变量 */
button {
  --button-blue: #0000ff;
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--button-blue);
}

使用 JavaScript 更改变量

// 获取根元素
var r = document.querySelector(':root');

// 获取变量值
function myFunction_get() {
  // 获取根的样式（属性和值）
  var rs = getComputedStyle(r);
    
  return rs.getPropertyValue('--blue');
}

// 设置变量值
function myFunction_set() {
  // 把变量 --blue 的值设置为另一个值
  r.style.setProperty('--blue', 'lightblue');
}

使用 媒体查询 更改变量

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

/* 可以先在类中声明，稍后使用 */
.container {
  --fontsize: 25px;
}

/* 样式 */
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

/* 直接修改变量的值 */
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}

用户界面

用户调整元素大小

resize 属性规定元素是否应（以及如何）被用户调整大小。

语法

resize: none|both|horizontal|vertical;
值 描述
none（默认） 用户无法调整元素的尺寸。
both 可调整元素的高度和宽度。
horizontal 可调整元素的宽度。
vertical 可调整元素的高度。 
.div {
  resize: both;
  overflow: auto;
}

🐢 需要结合 overflow 属性使用才有效果。

轮廓偏移

outline-offset 属性在轮廓与元素的边缘边框之间添加空间。

div.ex1 {
 /* 首先要渲染出轮廓 */
 outline: 4px solid red;
 outline-offset: 15px;
}

🌟 轮廓与边框不同！与边框不同，轮廓线是在元素边框之外绘制的，并且可能与其他内容重叠。同时，轮廓也不是元素尺寸的一部分：元素的总宽度和高度不受轮廓线宽度的影响。

补充的话

在仓库，还提供了许多前端常见需求及实现的归纳整理，欢迎客官看看~

如果这篇笔记能够帮助到你，请帮忙在 github 上点亮 star，感谢！