大家好，今天小编来为大家解答响应式网站源码分享浏览这个问题，响应式网站模板下载很多人还不知道，现在让我们一起来看看吧！
媒体查询（Mediaqueries）是实现响应式设计的最常见方法，它可以让我们根据设备的大致类型（如打印、手机、平板或电脑等）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视口宽度）来调整网站或应用。例如，缩小小型设备上的字体大小，判断手机朝向（横屏或竖屏）等。
CSS语法
媒体查询语法通常使用@media(@规则),可用于基于一个或多个媒体查询的结果来应用样式表。通过指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为true，将应用样式规则。
//媒体类型媒体特性表达式\n@mediamedia-typeand(media-feature-rule){\n/*CSSrulesgohere*/\n}
媒体类型
媒体类型（Mediatypes）描述设备的一般类别。可以指定的媒体类型为：
all适用于所有设备。print适用于在打印预览模式下。screen主要用于屏幕(计算机屏幕、平板电脑、智能手机)。speech主要应用于屏幕阅读器等发声设备。
在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。
媒体特性
媒体特性（Mediafeatures）描述了useragent、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。
最常用的特性是视口宽度，可以使用min-width（最常用）、max-width和width媒体特性，在视口宽度大于或者小于某个大小——或者是恰好等于某个大小——的时候，应用CSS样式规则。
逻辑运算符
逻辑操作符（logicaloperators）使用not,and,only和,(逗号)构建复杂的媒体查询。
and运算符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。not关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。only运算符仅在整个查询匹配时才用于应用样式，并且对于防止老式浏览应用所选样式很有用。,逗号将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个@media语句均返回true。换句话说，列表的行为类似于逻辑或or运算符。
使用not,only运算符，必须指定媒体类型。
在老式浏览器中将@mediaonlyscreenand(min-width:992px){…}简单地解释为only，因为没有叫only的设备，所以老式浏览器不会应用样式。当不使用only时,将@mediascreenand(min-width:992px){…}简单地解释为screen，忽略查询的其余部分，应用样式。
0x02断点
断点(Breakpoints)是响应式设计的基石。它是可自定义的宽度，使用它可以控制何时可以在特定视口或设备大小下调整布局。
断点设置
参照了Bootstrap的响应式设计，预设了五个响应尺寸：xs、sm、md、lg和xl。
断点
类中缀
分辨率
设备
X-Small
xs
<767px
超小屏幕手机
Small
sm
≥768px
小屏幕平板
Medium
md
≥992px
中等屏幕桌面显示器
Large
lg
≥1200px
大屏幕大桌面显示器
Extralarge
xl
≥1920px
超大屏幕大桌面显示器
在文件theme-chalk\\src\\common\\var.scss定义了这些断点。
/*Break-point\n————————–*/\n$–sm:768px!default;\n$–md:992px!default;\n$–lg:1200px!default;\n$–xl:1920px!default;\n\n//断点Map\n$–breakpoints:(\n&34;:(\nmax-width:$–sm-1,\n),\n&34;:(\nmin-width:$–sm,\n),\n&34;:(\nmin-width:$–md,\n),\n&34;:(\nmin-width:$–lg,\n),\n&34;:(\nmin-width:$–xl,\n),\n);
0x03组件响应式实现
@mixinres()
在文件theme-chalk\\src\\mixins\\mixins.scss定义了指令res构建css,使用媒体查询来创建关键的分界点阈值。
/*Break-points\n————————–*/\n//断点Map\n$–breakpoints:(\n&34;:(max-width:767px),\n&34;:(min-width:768px),\n&34;:(min-width:992px),\n&34;:(min-width:1200px),\n&34;:(min-width:1920px),\n);\n\n@mixinres($key,$map:$–breakpoints){\n//循环断点Map，如果存在则返回\n@ifmap-has-key($map,$key){\n@mediaonlyscreenand34;Undefeinedpoints:`34;;\n}\n}
指令功能逻辑如下：
指令res接受两个参数$key(响应尺寸)和$map（断点Map）。指令内部使用函数map-has-key($map,$key)作用是根据$key参数，返回$key在$map中对应的value值。如果$key不存在$map中，将返回null值（此时生成警告断点未定义Undefeinedpoints）。若返回true,使用函数map-get($map,$key)返回$key在$map中对应的value值。使用函数inspect($value)将其转成字符串，使用插值39;(max-width:767px)&{inspect(map-get($map,$key))}{@content;}\n//编译结果\n@mediaonlyscreenand(max-width:767px){…}
在栅格系统中，媒体查询通过断点构建CSS。响应式布局五个响应尺寸样式如下：
/*超小屏幕（手机，小于768px）*/\n@mediaonlyscreenand(max-width:767px){…}\n/*小屏幕（平板，大于等于768px）*/\n@mediaonlyscreenand(min-width:768px){…}\n/*中等屏幕（桌面显示器，大于等于992px）*/\n@mediaonlyscreenand(min-width:992px){…}\n/*大屏幕（大桌面显示器，大于等于1200px）*/\n@mediaonlyscreenand(min-width:1200px){…}\n/*超大屏幕（大桌面显示器，大于等于1920px）*/\n@mediaonlyscreenand(min-width:1920px){…}
0x04基于断点的隐藏实现
Element额外提供了一系列类名，用于在某些条件下隐藏元素。
使用方式
首先，项目引入样式文件：
import&39;;
然后将这些类名可以添加在任何DOM元素或自定义组件上。
hidden-xs-only-当视口在xs尺寸时隐藏hidden-sm-only-当视口在sm尺寸时隐藏hidden-sm-and-down-当视口在sm及以下尺寸时隐藏hidden-sm-and-up-当视口在sm及以上尺寸时隐藏hidden-md-only-当视口在md尺寸时隐藏hidden-md-and-down-当视口在md及以下尺寸时隐藏hidden-md-and-up-当视口在md及以上尺寸时隐藏hidden-lg-only-当视口在lg尺寸时隐藏hidden-lg-and-down-当视口在lg及以下尺寸时隐藏hidden-lg-and-up-当视口在lg及以上尺寸时隐藏hidden-xl-only-当视口在xl尺寸时隐藏
实现原理
文件theme-chalk\\src\\common\\var.scss定义了隐藏类断点Map$–breakpoints-spec，使用逻辑运算符and，让媒体查询能跨越多个断点宽度。
$–breakpoints-spec:(\n&34;:(\nmax-width:$–sm-1,\n),\n&34;:(\nmin-width:$–sm,\n),\n&34;:&{$–sm})and(max-width:34;,\n&34;:(\nmax-width:$–md-1,\n),\n&34;:(\nmin-width:$–md,\n),\n&34;:&{$–md})and(max-width:34;,\n&34;:(\nmax-width:$–lg-1,\n),\n&34;:(\nmin-width:$–lg,\n),\n&34;:&{$–lg})and(max-width:34;,\n&34;:(\nmax-width:$–xl-1,\n),\n&34;:(\nmin-width:$–xl,\n),\n);
转译后内容如下，定了关于视口宽度的各种媒体查询规则。
$–breakpoints-spec:(\n&34;:(max-width:767px),\n&34;:(min-width:768px),\n&34;:&34;,\n&34;:(max-width:991px),\n&34;:(min-width:992px),\n&34;:&34;,\n&34;:(max-width:1199px),\n&34;:(min-width:1200px),\n&34;:&34;,\n&34;:(max-width:1919px),\n&34;:(min-width:1920px),\n);
使用指令res生成带前缀hidden的隐藏类。隐藏类CSS规则display:none!important;用于隐藏元素。
//类前缀\n.hidden{\n//遍历Map$–breakpoints-spec\n@each$break-point-name,$valuein$–breakpoints-spec{\n//生成.hidden-{$break-point-name}{\n//生成媒体查询\n@includeres($break-point-name,$–breakpoints-spec){\ndisplay:none!important;\n}\n}\n}\n}
最终生成display.css，内容如下：
//当视口在`xs`尺寸时\n@mediaonlyscreenand(max-width:767px){/*.hidden-xs-only*/}\n//当视口在`sm`及以上尺寸时\n@mediaonlyscreenand(min-width:768px){/*.hidden-sm-and-up*/}\n//当视口在`sm`尺寸时\n@mediaonlyscreenand(min-width:768px)and(max-width:991px){/*.hidden-sm-only*/}\n//当视口在`sm`及以下尺寸时\n@mediaonlyscreenand(max-width:991px){/*.hidden-sm-and-down*/}\n//当视口在`md`及以上尺寸时\n@mediaonlyscreenand(min-width:992px){/*.hidden-md-and-up*/}\n//当视口在`md`尺寸时\n@mediaonlyscreenand(min-width:992px)and(max-width:1199px){/*.hidden-md-only*/}\n//当视口在`md`及以下尺寸时\n@mediaonlyscreenand(max-width:1199px){/*.hidden-md-and-down*/}\n//当视口在`lg`及以上尺寸时\n@mediaonlyscreenand(min-width:1200px){/*.hidden-lg-and-up*/}\n//当视口在`lg`尺寸时\n@mediaonlyscreenand(min-width:1200px)and(max-width:1919px){/*.hidden-lg-only*/}\n//当视口在`lg`及以下尺寸时\n@mediaonlyscreenand(max-width:1919px){/*.hidden-lg-and-down*/}\n//当视口在`xl`尺寸时\n@mediaonlyscreenand(min-width:1920px
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！