CSS-13 媒体查询使用方式；CSS绝对单位|相对单位|像素|DPR和PPI；CSS预处理器LESS、Sass和Scss

2023-10-25 07:20
文章标签 使用 查询 css 媒体 方式 处理器 frontend 13 像素 绝对 单位 相对 sass less ppi dpr

本文主要是介绍CSS-13 媒体查询使用方式；CSS绝对单位|相对单位|像素|DPR和PPI；CSS预处理器LESS、Sass和Scss，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

  • 1_媒体查询
    • 1.1_使用
    • 1.2_ 媒体类型（Media types）
    • 1.3_媒体特性（Media features）
    • 1.4_逻辑操作符（logical operators）
    • 1.5_常见的移动端设备
  • 2_CSS的单位
    • 2.1_绝对单位（ Absolute length units ）
    • 2.2_相对单位（ Relative length units ）
    • 2.3_像素是什么
    • 2.4_像素的不同分类
    • 2.5_DPR、PPI
  • 3_CSS预处理器
    • 3.1_CSS编写的痛点
    • 3.2_常见的CSS预处理器
  • 4_CSS预处理器 LESS
    • 4.1_认识
    • 4.2_编码+编译(举例)
    • 4.3_语法
  • 5_简单认识Sass和Scss

1_媒体查询

1.1_使用

  • 媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。

 可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改你的页面。

  • 媒体查询的使用方式主要有三种：

 方式一：通过@media和@import使用不同的CSS规则（常用）；

  <style>/*方式一：表示当界面宽度缩放小于等于800px的时候，会显现引用的css效果@import url(./css/test.css) (max-width: 800px);*//*方式二：不引用css文件，直接写好*/@media (max-width: 800px) {body {background-color: orange;}}</style>

  方式二：使用media属性为style, link, source和其他HTML元素指定特定的媒体类型；

<link rel="stylesheet" media="screen and (max-width: 800px)" href="./css/test.css">

  方式三：使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态；【跟JS有关】

1.2_ 媒体类型（Media types）

在使用媒体查询时，必须指定要使用的媒体类型。媒体类型是可选的，并且会（隐式地）应用 all 类型。

常见的媒体类型值如下：

  • all：适用于所有设备。

  • print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。

  • screen（掌握）：主要用于屏幕。

  • speech：主要用于语音合成器。

被废弃的媒体类型：

  CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)；

  但是以上在Media Queries 4 中已经被废弃，并且不应该被使用；

  aural类型被替换为具有相似效果的speech

1.3_媒体特性（Media features）

媒体特性（Media features）描述了 浏览器、输出设备，或是预览环境的具体特征；

通常会将媒体特性描述为一个表达式；

每条媒体特性表达式都必须用括号括起来；

在这里插入图片描述


1.4_逻辑操作符（logical operators）

媒体查询的表达式最终会获得一个Boolean值，也就是真（true）或者假（false）。

  • 如果结果为真（true），那么就会生效；

  • 如果结果为假（false），那么就不会生效；

如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询：

  • and：用于将多个媒体查询规则组合成单条媒体查询

  • not：用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。

  • only：仅在整个查询匹配时才用于应用样式。

  • , (逗号)：逗号用于将多个媒体查询合并为一个规则。

 <style>/*比如下面表示：屏幕宽度大于500，小于700的时候，body背景颜色为红色；*/@media (min-width: 500px) and (max-width: 800px) {body {background-color: orange;}}</style>

1.5_常见的移动端设备

在这里插入图片描述

<style>/* 让分辨率处于下面的范围时，显现对应的css样式320~375之间 font-size: 15px;375~414之间 font-size: 18px;414~480之间 font-size: 21px;大于480px font-size: 24px*//* @media (min-width: 320px) and (max-width: 375px) {.box { font-size: 15px; }}@media (min-width: 375px) and (max-width: 414px) {.box { font-size: 18px; }}@media (min-width: 414px) and (max-width: 480px) {.box { font-size: 21px; }}@media (min-width: 480px) {.box { font-size: 24px; }} *//* CSS层叠性：效果与上面注释的一样 */@media (min-width: 320px) {.box { font-size: 15px; }}@media (min-width: 375px) {.box { font-size: 18px; }}@media (min-width: 414px) {.box { font-size: 21px; }}@media (min-width: 480px) {.box { font-size: 24px; }}</style>



2_CSS的单位

经常会使用px来表示一个长度（大小），比如font-size设置为18px，width设置为100px。

px是一个长度（length）单位，事实上CSS中还有非常多的长度单位。

整体可以分成两类：

  • 绝对长度单位（Absolute length units）；

  • 相对长度单位（Relative length units）；

2.1_绝对单位（ Absolute length units ）

  • 比如cm（厘米）、mm（毫米）、in(英寸)、pt（点）、px…
  • 这些值中的大多数在用于打印，比用于屏幕输出时更有用
  • 惟一个经常使用的值，就是px(像素)

2.2_相对单位（ Relative length units ）

  • 相对长度单位相对于其他一些东西； 比如父元素的字体大小，或者视图端口的大小；

  • 使用相对单位的好处是，经过一些仔细的规划，可以使文本或其他元素的大小与页面上的其他内容相对应；

    em、rem与字体大小fot-size有关，vw 用的多

在这里插入图片描述


2.3_像素是什么

  • px是pixel单词的缩写，翻译为像素。
  • 像素是影响显示的基本单位。（比如屏幕上看到的画面、一幅图片）；
  • pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel；
  • “像素”表示“画像元素”之意，有时亦被称为pel（picture element）；

2.4_像素的不同分类

设备像素（物理像素）:

  • 设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；
  • 在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小；
  • 比如iPhone X的分辨率 1125x2436，指的就是设备像素；

设备独立像素（逻辑像素）：

  • 如果面向开发者使用设备像素显示一个100px的宽度，在不同屏幕上显示效果会是不同的；
  • 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
  • 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
  • 比如购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论购买的是2k、4k的显示器，对于开发者来说，都是1920x1080的大小

CSS像素：

  • CSS中经常使用的单位也是pixel，在默认情况下等同于设备独立像素（逻辑像素）
  • 逻辑像素才是面向开发者的。

2.5_DPR、PPI

DPR：Device Pixel Ratio （设备像素比）

  • 2010年，iPhone4问世，带来了移动互联网，还有Retina屏幕；
  • Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；
  • 在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）；
  • 我们可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；

PPI（了解）：每英寸像素（英语：Pixels Per Inch，缩写：PPI）

  • 通常用来表示一个打印图像或者显示器上像素的密度；
  • 前面我们提过1英寸=2.54厘米，在工业领域被广泛应用；


3_CSS预处理器

3.1_CSS编写的痛点

前端项目越来越复杂, 需要几千行甚至上万行的CSS完成页面美化工作，随着代码量的增加, 造成很多的编写不便：

  • 比如大量的重复代码, 虽然可以用类来勉强管理和抽取, 但是使用起来依然不方便；
  • 比如无法定义变量（当然目前已经支持）, 如果一个值被修改, 需要修改大量代码, 可维护性很差; (比如主题颜色)
  • 比如没有专门的作用域和嵌套, 需要定义大量的id/class来保证选择器的准确性, 避免样式混淆。

另一种CSS称呼是 面向命名编程；

社区为了解决问题, 出现了CSS预处理器(CSS_preprocessor)：

  • 让你通过预处理器自己独有的语法来生成CSS的程序;
  • 市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性;
  • 代码最终会转化为CSS来运行, 因为对于浏览器来说只识别CSS;

3.2_常见的CSS预处理器

Sass/Scss：

  • 2007年诞生，最早最成熟的CSS预处理器，拥有ruby社区的支持，是属于Haml（一种模板系统）的一部分;
  • 目前受LESS影响，已经进化到了全面兼容CSS的Scss;

Less:

  • 2009年出现，受Sass的影响较大，但又使用CSS的语法，让大部分开发者更容易上手;
  • 比起SASS来，可编程功能不够，不过优点是使用方式简单、便捷，兼容CSS，并且已经足够使用；
  • 另外反过来也影响了Sass演变到了Scss的时代；
  • 著名的Twitter Bootstrap就是采用Less做底层语言的，也包括React的UI框架AntDesign。

Stylus:

  • 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持;
  • 语法偏向于Python, 使用率相对于Sass/Less少很多


4_CSS预处理器 LESS

4.1_认识

官方的介绍: It’s CSS, with just a little more.

Less （Leaner Style Sheets的缩写） 是一门CSS扩展语言,且兼容CSS

  • Less增加了很多相比于CSS更好用的特性;
  • 比如定义变量、混入、嵌套、计算等等；
  • Less最终需要被编译成CSS运行于浏览器中（包括部署到服务器中）；

4.2_编码+编译(举例)

html文件

<body><div class="container"><div class="box"></div></div></body>

less文件内容（.box可嵌套）

.container {width: 200px;height: 200px;background-color: orange;.box {width: 100px;height: 100px;background-color: #f00;}}

编译方式:

方式一：下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译；

  目前还没有学习到Node，更没学习过npm工具；

  所以现阶段不使用less本地工具来管理；

  后续学习了webpack可以自动完成这些操作的；

方法二：通过VSCode插件[Easy LESS]来编译成CSS ,到时在html文件link引入编译生成的css文件;

或者在线编译 https://lesscss.org/less-preview/ 【不推荐】

方式三：引入CDN的less编译代码，对less进行实时的处理；

<link rel="stylesheet/less" href="./less/test.less">
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

方式四 ：将less编译的js代码下载到本地，执行js代码对less进行编译；

 <link rel="stylesheet/less" href="./less/test.less"><script src="./js/lessc.js"></script>

4.3_语法

Less兼容CSS

  • 可以在Less文件中编写所有的CSS代码；
  • 但把css的扩展名改成了less

变量（Variables）

(1) 在一个大型的网页项目中，CSS使用到的某几种属性值往往是特定的

比如主题颜色值，每次编写类似于#f3c258格式的语法，但记忆这种格式不太方便，需要重新编写或者拷贝样式；
如果主题颜色改变，需要修改大量的代码， 所以将常见的颜色或者字体等定义为变量来使用；

(2)在Less文件中使用如下的格式来定义变量：@变量名: 变量值 ;

/* 先定义变量*/
@mainColor: #a40011;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;/* 后使用变量*/
.box {color: @mainColor;font-size: @normalFontSize;
}

嵌套（Nesting）

（1）当我们需要找到一个内层的元素时，往往需要嵌套很多层的选择器

.box h1 .keyword .section .list .item a .desc {color: @mainColor;font-size: @bigFontSize;}

（2）Less提供了选择器的嵌套
（3）特殊符号：& 表示当前选择器

.box {.pel {color: @mainColor;font-size: @normalFontSize;}h1 {.keyword {color: @mainColor;font-size: @bigFontSize;}}p {a.link {color: @mainColor;font-size: @smallFontSize;background-color: #0f0;&:hover {   //选中的元素是 <a>color: #00f;}}}
}

运算（Operations） （加减乘除）

  • 算术运算符 +、-、 * 、/ 可以对任何数字、颜色或变量进行运算。
  • 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准；
  • 如果单位换算无效或失去意义，则忽略单位；
.box {font-size: 20px;width:  50px + 10% ;/* 55px*/height: 100px;background-color: #ff0000 + #00ff00;
}

混合（Mixins）

  • 在CSS编写过程中，多个选择器中可能会有大量相同的代码

    • 将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用；
    • 在less中提供了混入（Mixins）来帮助完成这样的操作；

  • 混合（Mixin）是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。

  • 注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用

/* 没有传参的混合 基本写法。先定义一组代码，后在其他地方调用*/
.nowrap_ellipsis {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}.box1 {width: 100px;background-color: #f00;.nowrap_ellipsis();/*调用另一组css样式*/
}.box2 {width: 150px;background-color: #0f0;.nowrap_ellipsis();/*调用另一组css样式*/
}

// 传参的混合 写法。先定义一组代码，含有参数，后在其他地方调用，同时可以传参
.box_border(@borderWidth: 5px, @borderColor: purple) {border: @borderWidth solid @borderColor;
}.box1 {width: 100px;background-color: #f00;.box_border();/*调用*/
}.box2 {width: 150px;background-color: #0f0;.box_border(10px, orange);/*含参调用*/
}

映射（Maps）

//先定义一个函数
.box_size {width: 100px;height: 100px;
}.box1 {width: .box_size()[width];//映射这个函数中的一个数据background-color: #f00;
}

extend继承

  • 和mixins作用类似，用于复用代码；
  • 和mixins相比，继承代码最终会转化成并集选择器，所有的样式都显现出来；

Less内置函数

  • Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
  • 内置函数手册：https://less.bootcss.com/functions/

作用域（Scope）

  • 在查找一个变量时，首先在本地查找变量和混合（mixins）；
  • 如果找不到，则从“父”级作用域继承；

注释（Comments）： 在Less中，块注释和行注释都可以使用；

导入（Importing）

  • 导入的方式和CSS的用法是一致的；
  • 导入一个 .less 文件，此文件中的所有变量就可以全部使用了；
  • 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉；


5_简单认识Sass和Scss

  • Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进

  • Sass的语法和CSS区别很大，后来官方推出了全新的语法Scss，意思是Sassy CSS，是完全兼容CSS的。

  • 学习Scss：

    • Scss的语法也包括变量、嵌套、混入、函数、操作符、作用域等；

    • 通常也包括更为强大的控制语句、更灵活的函数、插值语法等；

    • 可以根据之前学习的less语法来学习一些SCS语法；

    • 学习网站 https://sass-lang.com/guide

这篇关于CSS-13 媒体查询使用方式；CSS绝对单位|相对单位|像素|DPR和PPI；CSS预处理器LESS、Sass和Scss的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/280959。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2