书写错误,查看是否写正确。
分辨率不适用,需要调整到指定分辨率。
CSS (层叠样式表)层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
语言标准在CSS 2.1规范中,识别符(包括选择符中的元素名、类、ID)只能包含A~Z、a~z、0~9等字符,加上连字符“-”、下划线“_”。识别符不能以数字开头,以连字符和下划线开头也是不允许的。只有属性、属性值、单位、伪类、伪元素和“@”规则可以由连字符“-”开头。同时,其他元素名称、类和ID标识符也不允许用连字符开头。
CSS的识别符也需要用反斜杠“\”规避特殊字符,这些规避字符遵循IS010646规范。特殊字符的规避方法有两种:第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠,例如,“AT&T”变为“AT\&T”;另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起,规避特殊字符,例如,“AT&T”变为“AT\26T”。
W3C文档这样描述的:The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
翻译过来就是:only是为了在不支持媒体查询的浏览器中隐藏样式表,浏览器处理以only开头的关键词时将会忽略only。
@media only screen and (min-width:xxx) and (max-width:xxx) 与 @media screen and (min-width:xxx) and (max-width:xxx) 在支持媒体查询的浏览器中其实是一模一样的,没有任何区别,因为only将被忽略。但是在不支持媒体查询的浏览器中由于没有only这个媒体类型,因此会直接忽略这条媒体查询。在不支持媒体查询的浏览器中,如果不加only,@media screen and (min-width:xxx) and (max-width:xxx)将会被解析为@media screen,明显与期望不一致。因此通过加一个浏览器不认识的媒体类型only则浏览器将会直接忽略这条媒体查询。
media="only screen and (min-width: 401px) and (max-width: 600px)"/* 在支持媒体查询的浏览器中等于*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时,会将only视为媒体类型。(由于没有only这种媒体类型,因此将不会被应用)*/
media="only"
/*如果不带only,在不支持媒体查询的浏览器中*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*将被解析为screen,将会被应用到屏幕类型设备上*/
media="screen"
我正在使用 62.5% 技巧在不同的屏幕尺寸上设置我的字体大小。这些字母在大屏幕上看起来太小了,所以我想使用最小宽度媒体查询将其增加到 80% 的字体大小,但由于某种原因,这根本不起作用。难道我做错了什么? 我正在使用 sass,此文件位于 _themes.scss 文件中编辑:当我查看检查器时,媒体查询被划掉并显示“未知属性名称”
*,
*::before,
*::after {
color:rgb(255 211 0)">margin: 0
color:rgb(253 97 106)">padding: 0
color:rgb(98 189 255)">box-sizing: border-box
}
html {
color:rgb(98 189 255)">font-size: color:rgb(144 255 173)">62.5%
@media screen and (color:rgb(98 189 255)">min-width: 1600px) {
color:rgb(98 189 255)">font-size: 80%
}
}
html,
body {
color:rgb(98 189 255)">overflow-x: hidden
}
body {
color:rgb(98 189 255)">font-family: 'Poppins', Avenir, Helvetica, Arial, sans-serif
color: color:rgb(73 238 255)">hsl(0, 0%, 100%)
text-align: center
color:rgb(98 189 255)">font-size: 1.6rem
min-height: 100vh
}