可以根据设备的类型(比如屏幕设备、打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面。
方式一:通过@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有关】
在使用媒体查询时,必须指定要使用的媒体类型。媒体类型是可选的,并且会(隐式地)应用 all 类型。
常见的媒体类型值如下:
all:适用于所有设备。
print:适用于在打印预览模式下在屏幕上查看的分页材料和文档。
screen(掌握):主要用于屏幕。
speech:主要用于语音合成器。
被废弃的媒体类型:
CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural);
但是以上在Media Queries 4 中已经被废弃,并且不应该被使用;
aural类型被替换为具有相似效果的speech
媒体特性(Media features)描述了 浏览器、输出设备,或是预览环境的具体特征;
通常会将媒体特性描述为一个表达式;
每条媒体特性表达式都必须用括号括起来;
媒体查询的表达式最终会获得一个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>
<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>
经常会使用px来表示一个长度(大小),比如font-size设置为18px,width设置为100px。
px是一个长度(length)单位,事实上CSS中还有非常多的长度单位。
整体可以分成两类:
绝对长度单位(Absolute length units);
相对长度单位(Relative length units);
相对长度单位相对于其他一些东西; 比如父元素的字体大小,或者视图端口的大小;
使用相对单位的好处是,经过一些仔细的规划,可以使文本或其他元素的大小与页面上的其他内容相对应;
em、rem与字体大小fot-size有关,vw 用的多
设备像素(物理像素):
设备独立像素(逻辑像素):
CSS像素:
DPR:Device Pixel Ratio (设备像素比)
PPI(了解):每英寸像素(英语:Pixels Per Inch,缩写:PPI)
前端项目越来越复杂, 需要几千行甚至上万行的CSS完成页面美化工作,随着代码量的增加, 造成很多的编写不便:
另一种CSS称呼是 面向命名编程;
社区为了解决问题, 出现了CSS预处理器(CSS_preprocessor):
Sass/Scss:
Less:
Stylus:
官方的介绍: It’s CSS, with just a little more.
Less (Leaner Style Sheets的缩写) 是一门CSS扩展语言,且兼容CSS
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>
Less兼容CSS
变量(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编写过程中,多个选择器中可能会有大量相同的代码
混合(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继承
Less内置函数
作用域(Scope)
注释(Comments): 在Less中,块注释和行注释都可以使用;
导入(Importing)
Sass的语法使用的是类似于Ruby的语法,没有花括号,没有分号,具有严格的缩进
Sass的语法和CSS区别很大,后来官方推出了全新的语法Scss,意思是Sassy CSS,是完全兼容CSS的。
学习Scss:
Scss的语法也包括变量、嵌套、混入、函数、操作符、作用域等;
通常也包括更为强大的控制语句、更灵活的函数、插值语法等;
可以根据之前学习的less语法来学习一些SCS语法;
学习网站 https://sass-lang.com/guide
文章浏览阅读451次。dev/mem: 物理内存的全镜像。可以用来访问物理内存。/dev/kmem: kernel看到的虚拟内存的全镜像。可以用来访问kernel的内容。调试嵌入式Linux内核时,可能需要查看某个内核变量的值。/dev/kmem正好提供了访问内核虚拟内存的途径。现在的内核大都默认禁用了/dev/kmem,打开的方法是在 make menuconfig中选中 device drivers --> ..._dev/mem 源码实现
文章浏览阅读7.1k次,点赞2次,收藏19次。vxe-table,一个小众但功能齐全并支持excel操作的vue表格组件_vxe-table
文章浏览阅读62次。参考:http://www.ruanyifeng.com/blog/2016/01/babel.htmlBabelBabel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item..._让开发环境支持bable
文章浏览阅读2.8k次,点赞6次,收藏29次。摘要:FPGA视频处理FIFO的典型应用,视频输入FIFO的作用,视频输出FIFO的作用,视频数据跨时钟域FIFO,视频缩放FIFO的作用_fpga 频分复用 视频
文章浏览阅读575次。【代码】R语言:设置工作路径为当前文件存储路径。_r语言设置工作目录到目标文件夹
文章浏览阅读452次。格式:background: linear-gradient(direction, color-stop1, color-stop2, ...);<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>] ,]? &l..._background线性渐变
文章浏览阅读1k次,点赞26次,收藏8次。第十三届蓝桥杯青少年组python编程省赛真题一、题目要求(注:input()输入函数的括号中不允许添加任何信息)1、编程实现给定一个正整数N,输出正整数N中各数位最大的那个数字。例如:N=132,则输出3。2、输入输出输入描述:只有一行,输入一个正整数N输出描述:只有一行,输出正整数N中各数位最大的那个数字输入样例:
文章浏览阅读2.2k次。一个网络协议主要由以下三个要素组成:1.语法数据与控制信息的结构或格式,包括数据的组织方式、编码方式、信号电平的表示方式等。2.语义即需要发出何种控制信息,完成何种动作,以及做出何种应答,以实现数据交换的协调和差错处理。3.时序即事件实现顺序的详细说明,以实现速率匹配和排序。不完整理解:语法表示长什么样,语义表示能干什么,时序表示排序。转载于:https://blog.51cto.com/98..._网络协议三要素csdn
文章浏览阅读153次。主要的思想,将所有的系统都可以看作两部分,真正的数据log系统和各种各样的query engine所有的一致性由log系统来保证,其他各种query engine不需要考虑一致性,安全性,只需要不停的从log系统来同步数据,如果数据丢失或crash可以从log系统replay来恢复可以看出kafka系统在linkedin中的重要地位,不光是d..._the log: what every software engineer should know about real-time data's uni
文章浏览阅读746次。伟大是熬出来的 目录 前言 引言 时间熬成伟大:领导者要像狼一样坚忍 第一章 内圣外王——领导者的心态修炼 1. 天纵英才的自信心 2. 上天揽月的企图心 3. 誓不回头的决心 4. 宠辱不惊的平常心 5. 换位思考的同理心 6. 激情四射的热心 第二章 日清日高——领导者的高效能修炼 7. 积极主动,想到做到 8. 合理掌控自己的时间和生命 9. 制定目标,马..._当狼拖着受伤的右腿逃生时,右腿会成为前进的阻碍,它会毫不犹豫撕咬断自己的腿, 以
文章浏览阅读285次。在当今的大数据时代,人们对高速度和高带宽的需求越来越大,迫切希望有一种新型产品来作为高性能计算和数据中心的主要传输媒质,所以有源光缆(AOC)在这种环境下诞生了。有源光缆究竟是什么呢?应用在哪些领域,有什么优势呢?易天将为您解答!有源光缆(Active Optical Cables,简称AOC)是两端装有光收发器件的光纤线缆,主要构成部件分为光路和电路两部分。作为一种高性能计..._aoc 光缆
文章浏览阅读2.2k次。在“桌面”上按快捷键“Ctrl+R”,调出“运行”窗口。接着,在“打开”后的输入框中输入“Gpedit.msc”。并按“确定”按钮。如下图 找到“用户配置”下的“Windows设置”下的“Internet Explorer 维护”的“连接”,双击选择“自动浏览器配置”。如下图 选择“自动启动配置”,并在下面的“自动代理URL”中填写相应的PAC文件地址。如下..._設置proxy腳本