css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配 使用样例如下： // 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内...&.info-desc-box { display: none; } } } } 注意三点： 1、宽高比一定是比值的形式...，不能直接写小数，宽/高 2、在less中直接写宽高比也不会生效，因为less会编译成小数，可以在比值前面加一个 ~ 完美解决 3、避免样式覆盖，最好把大比例的媒体查询写在后面 参考链接： https...://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries 媒体查询 http://www.zhangyunling.com/837
Query) 是CSS3新语法 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面...，暂且了解三个，注意他们要加小括号包含 值 说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度...4️⃣媒体查询+rem实现元素动态大小变化: rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸 媒体查询可以根据不同设备宽度来修改样式 媒体查询+rem 就可以实现不同设备宽度...CSS文件 所以，只需要把我们的less文件 编译生成为css文件 就可以了 Vscode Less 插件: Easy LESS 1️⃣Less 变量: 变量是指没有固定的值，可以改变的，因为CSS中的颜色和数值等...文件中导入less文件 ---- 1️⃣ rem 适配方案: 让一些不能等比自适应的元素，达到当设备尺寸发生改变时，等比例适配当前设备 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用
使用 @media查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中 ,页面也会根据浏览器的宽度和高度重新渲染页面...注意他们要加小括号包含 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 注意...页面元素可以设置不同大小尺寸， 媒体查询可以根据不同设备宽度来修改样式 媒体查询+ rem就可以实现不同设备宽度,实现页面元素大小的动态变化 2.4引入资源(理解) 当样式比较繁多的时候,我们可以针对不同的媒体使用不同...Less中文网址: http://lesscss.cn/ 常见的CSS预处理器: Sass、Less、 Stylus 3.3 Less使用 我们首先新建一个后缀名为less的文件 ,在这个Iess文件里面书写...Less 变量 Less 编译 Less 嵌套 Less运算 3.4 Less变量 变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机...、android手机、平板等设备都用得到多媒体查询 2.2语法规范 /* 这句话的意思是：在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */...注意他们要加小括号包含 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 2.3...媒体查询+rem实现元素动态大小变化 rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸 媒体查询可以根据不同设备宽度来修改样式 媒体查询+rem就可以实现不同设备宽度...Less变量 Less编译 Less嵌套 Less运算 3.4 Less变量 变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
使用@media 查询，可以针对不同的媒体类型定义不同的样式； @media 可以针对不同的屏幕尺寸设置不同的样式； 重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面； 苹果手机、Android...常见的 CSS 预处理器： Sass、Less、Stylus Less 作为 CSS 一种形式上的扩展，没有减少 CSS 的功能，而是在现有的 CSS 语法上，加入程序式语言的特性。...Less 官网 使用 过程： 新建后缀名为 less 的文件，书写 less 语句 less 编译生成 css 文件 引入 CSS 文件 Less 变量 没有固定的值，可以改变的。...@变量名:值; 变量命名规范 必须以@为前缀 不能包含特殊字符 不能以数字开头 区分大小写 使用示例： Less 编译 Less 包含一套自定义的语法和一个解析器，用户根据这些语法定义自己的样式规则，...实现 使用媒体查询根据不同设备按比例设置 html 的字体大小 页面元素使用 rem 做单位。这样的话，当 html 字体大小变化（即不同设备）时，元素尺寸也会发生变化，从而达到等比例缩放的适配。
使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机...less 基础 维护css弊端 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。...Less中文网址：http://lesscss.cn/ 常见的CSS预处理器：Sass、Less、Stylus 一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。...Less 使用之变量 变量是指没有固定的值，可以改变的。...2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
viewport宽度，可以设置device-width特殊值 hinitial-scale 初始缩放比，大于0的数字 maximum-scale 最大缩放比，大于0的数字 minimum-scale 最小缩放比...媒体查询 2.1 媒体查询简介 媒体查询（Media Query）是CSS3新语法。...使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机...，媒体查询我们要按照从小到大或者从大到小的顺序来写 3. less 3.1 less 介绍 css 的弊端 CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。...页面才能使用 3.5 less 嵌套 3.6 less 计算 任何数字、颜色或者变量都可以参与运算。
minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。 2.媒体查询 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。...它的所有子元素自动成为容器成员，称为Flex项目（flex item） 4. Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言 有人说99%的前端开发者都没有系统的学习过 CSS。...因为 CSS 是会导致污染的，不同的样式之间会互相影响，这对大多数没有系统学习过 CSS 的同学来说简直是灾难。所以写可读性高、性能好的 CSS 样式尤为重要。...sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。...或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
维护css弊端 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。...Less中文网址：http://lesscss.cn/ 常见的CSS预处理器：Sass、Less、Stylus 一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。...Less 使用之变量 变量是指没有固定的值，可以改变的。...2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。...技术方案： 1.less+rem+媒体查询 2.lflexible.js+rem 总结： 两种方案现在都存在。 方案2 更简单，现阶段大家无需了解里面的js代码。
之前做不同颜色的皮肤，暗黑模式可以单做其中的一种黑色暗黑主题。 通用的方法，就是less、sass、post-css，把颜色抽离出变量。.../react/customize-theme-cn 其实这个和第一种方法差不多，目前facebook youtube 等，都是采用css 变量来实现 媒体查询与css变量实现 现在可以利用 CSS 的媒体查询方法...CSS 的媒体查询 prefers-color-scheme 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。...结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配。.../page.json"), // CSS 变量，可以支持多个 } } }; 现在的 Web、App 项目大都引用第三方开源组件库，组件库一般会使用 Sass、Less 等 CSS 预处理器定义颜色变量作为组件的基础色值
当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载 （只不过不会被应用）。 包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。...SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS) 24、CSS优化、提高性能的方法有哪些？ 关键选择器（key selector）。...（3）继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。...- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性， 还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率
（Less）、继承 合并、媒体查询 条件判断、循环 引入 一、了解Sass和Less Sass 对自己的定位首先是一个预处理器。...它是一种无论你想怎么样使用，大都能顺利转换成 CSS 的程序语言。 Sass和Less都属于预处理器。Less文件以.less结尾，Sass文件新版的以.scss结尾，老版的以.sass结尾。...二、Sass和Less 语法 图片 2.1 注释 在less文件中，单行注释不会再css文件中显示出来，多行注释就是css的注释方式，会在css文件中显示出来。...图片 合并、媒体查询 Less合并 在Less中对同一种属性的值进行合并，用+合并之后，编译的是用,隔开，用+_合并的值，编译后用空格隔开。...---- Less和Sass媒体查询 条件判断、循环 Less条件判断和循环 图片 ---- Sass循环 只有在Sass中有if-else，和for循环 图片 图片 图片
输出将只有一个CSS文件，这对于浏览器和服务器来说是一件好事，以避免有大量的HTTP请求。 媒体查询的样式应该放在哪里？...网络上的常见做法是使用仅以最小宽度为起点而没有最大宽度的断点（称之为“开放式断点”），这是一个非常大的问题！你问为什么？因为你几乎无法控制上层断点会受到什么影响！...Open breakpoints 打开断点 当我们使用媒体查询时，有一个起始值但没有结束值。例如: Closed breakpoints 闭合断点 当我们使用具有开始和结束值的媒体查询时。...您可以在同一个媒体查询中使用尽可能多的断点，使用逗号（表示“或”），因为我们已经将这些断点保存在变量中，所以可以轻松使用它们。 CSS封装的威力与闭合断点 现在让我们再来看看这个主标题组件。...总结 从这篇文章中需要了解的重点是什么： 以小组件为单位工作 在单独的文件中定义SASS变量中的常见闭合断点 在每个需要的组件中使用SASS变量的断点 工作和思考时要“基本优先”！
优化以前写过的一篇文章：https://www.cnblogs.com/beileixinqing/p/11283315.html 目前常见移动端适配方案 1、媒体查询 通过写媒体查询，在不同的分辨率下写对应不同的样式...截图来自X5内核－Can I Use 视口单位特点是宽度或者高度不同，对应的尺寸也会发生变化，从而达到适配即自适应，然而也有缺点，不能设置最大最小宽度限制，当比如横屏展示的时候，宽度很宽的情况下，必须设置最大...限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度 自己常用的两种方案 方案一：使用lib-flexible包 参考链接：https://www.w3cplus.com/mobile...方案二：使用less或者sass等CSS 预处理语言写适配方案 参考链接：https://juejin.im/post/5caaa230e51d452b672f9703#heading-7 基准按照设计图尺寸...，需要用媒体查询做个适配，用vw更合理。
一直以来我们都知道，CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。...之前的 LESS、SASS预处理器的变量系统就是完成这个的，现在 CSS 变量也能轻松做到。...color:var(--mainColor); } 2、精简代码，减少冗余，响应式媒体查询的好帮手 一般而言，使用媒体查询的时候，我们需要将要响应式改变的属性全部重新罗列一遍。...和 SASS 也无法做到更加简便，不过 CSS 变量的出现让媒体查询更加的简单： :root { --mainWidth:1000px; --leftMargin:100px; } .main...，只是我这里示例的 CSS 改变的样式属性较少，当媒体查询的数量达到一定程度，使用 CSS 变量从代码量及美观程度而言都是更好的选择。
尽管现在SCSS已经正式成为Sass CSS预处理程序的主要语法，但是还没有计划弃用原始版本的计划。 Less Less最早出现在2009年。它受Sass的影响，但对后来引入的SCSS格式有影响。...Less CSS预处理器本身是用JavaScript编写的，这也简化了设置。 比较Less与Sass，我们会发现它们的基本功能非常相似。它们都允许嵌套，导入和使用变量。...但是，在Less中，您还可以提升变量并从Sass无法使用的颜色中提取某些成分，即色调，饱和度，光度和亮度。另一方面，Sass允许您使用if语句并将其插入选择器和属性名称中。...它的语法还包含三元运算符和嵌套收集器。 Less的另一个小缺点是使用@符号进行变量声明（Sass使用$符号代替）。但是，在CSS中，@也可以用于关键帧和媒体查询。在阅读代码时，这可能会引起一些混乱。...您可以将其与普通CSS语法和上述预处理器一起使用。它最大的优点就是模块化，我们需要的各个功能都可以通过引入各个模块完成，因此，它的效率是非常高的。
怎么去计算 rem 通过 JavaScript 读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的 font-size const oHtml = document.getElementByTagName...使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度，因为其元素的基准尺寸是直接算出来的。...媒体查询 既然是根据屏幕的宽度来设置元素的大小，大部分同学应该想到的是 css3 的媒体查询来解决这个问题，其实这种方法也是我们最常用的解决方案之一。...和 LESS 方法去更好的时候用 REM 我们先设置一个 font-size 的方法 // css html { font-size: 62.5%; /* 基础的 font-size: 10px...上面这篇文章很好的用 js 解决的 px-->rem 应用 需要兼容大部分移动端，文字和图片较多的应用，比如淘宝，小说网之类的应用可以使用这种方法 我们平时使用rem还有遇到的一大问题就是我们习惯使用
更在创造力无穷的前端开发者手中大放异彩。 基础用法 在前端的领域中，标准的实现总是比社区的约定要慢的多，前端框架最喜欢的 $ 被 Sass 变量用掉了。而最常用的 @ 也被 Less 用掉了。...官方为了让 css 变量也能够在 Sass 及 Less 中使用，无奈只能妥协的使用 --。...这里我先介绍两个关于该功能的前置知识点: 事实上，CSS 变量的 var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量此前没有定义或者是无效值，就会使用这个默认值。.../* 没有设置过 --primary-color，颜色默认使用 #7F583F */color: var(--primary-color, #7F583F); 虽然目前 CSS 变量不是新的属性，但终究不是所有的浏览器都支持...当我们需要开发响应式网站的时候，我们必须要使用媒体查询 @media。
媒体查询功能 最常用的用作媒体查询的功能如下： image.png max-width和min-width是迄今为止最受欢迎的查询功能。 2....媒体查询断点 最常用的媒体查询断点值： image.png 迄今为止最常见的断点是 767 和 768 px，这与 iPad 在纵向模式下的分辨率非常吻合。...767px 被大量用作最大宽度断点，而很少用作最小宽度值。786px经常被用作最小和最大断点。 3....媒体查询属性 通过媒体查询最常更改的属性： image.png 最常设置的属性是display，紧随其后的是color, width, 和height。...八、自定义属性 2019-2021 年自定义属性使用的变化如下： image.png 今年，28.6% 的移动页面和 28.3% 的桌面页面定义了自定义属性（也就是CSS变量）。
基础用法 在前端的领域中，标准的实现总是比社区的约定要慢的多，前端框架最喜欢的 $ 被 Sass 变量用掉了。而最常用的 @ 也被 Less 用掉了。...官方为了让 CSS 变量也能够在 Sass 及 Less 中使用，无奈只能妥协的使用 --。...这里我先介绍两个关于该功能的前置知识点: 事实上，CSS 变量的 var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量此前没有定义或者是无效值，就会使用这个默认值。.../* 没有设置过 --primary-color，颜色默认使用 #7F583F */ color: var(--primary-color, #7F583F); 虽然目前 CSS 变量不是新的属性，但终究不是所有的浏览器都支持...当我们需要开发响应式网站的时候，我们必须要使用媒体查询 @media。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
