elementui响应式布局弹窗(elementui响应式布局教程)

媒体查询是实现响应式设计的最常见方式。它们允许我们根据设备的一般类型(如打印机、手机、平板电脑或电脑等)来调整网站或应用程序。)或特定功能和设备参数(如屏幕分辨率和浏览器视窗宽度)。比如在小型设备上缩小字体大小，判断手机方位(横屏还是竖屏)等。
Syntax CSS媒体查询语法通常使用@media(@ rule)，可用于根据一个或多个媒体查询的结果应用样式表。如果指定的媒体类型与正在显示的文档的设备类型匹配，并且媒体查询中的所有表达式都为真，则将应用样式规则。
//媒体类型媒体特征表达式@ mediamedia-type和(media-feature-rule) {/* CSS规则在此*/}媒体媒体类型描述了设备的一般类别。可以指定的媒体类型有：
All适用于所有设备。打印适用于打印预览模式。Screen主要用于屏幕(电脑屏幕、平板电脑、智能手机)。语音主要用于声音设备，如屏幕阅读器。如果不使用not或only运算符，媒体类型是可选的，默认为all。
媒体特征描述了用户代理、输出设备或浏览环境的具体特征。媒体属性表达式是完全可选的，它负责测试这些属性或特性是否存在以及它们的值是什么。每个媒体特征表达式必须用括号括起来。最常用的功能是视口宽度。当视口宽度大于或小于特定大小3354或刚好等于特定大小——时，可以使用最小宽度(最常用)、最大宽度和宽度媒体功能来应用CSS样式规则。
运算符逻辑运算符只使用not、and和(逗号)来构造复杂的媒体查询。
and运算符用于将多个媒体属性组合到同一媒体查询中。只有当每个属性都为真时，该查询的结果才为真。not运算符用于拒绝媒体查询，如果不满足此条件，它将返回true，否则将返回false。如果它出现在以逗号分隔的查询列表中，它只会否定该查询所应用到的特定查询。Not关键字不能用于拒绝单个媒体函数表达式，而只能用于拒绝整个媒体查询。唯一操作符用于仅在整个查询匹配时应用样式，它有助于防止老式浏览应用所选样式。逗号将多个媒体查询合并到一个规则中。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，整个@media语句将返回true。换句话说，列表的行为类似于逻辑or或OR运算符。使用not，only运算符时，必须指定媒体类型。
在老式浏览器中，@ media only screen and(min-width : 992 px){.}简单解释为只有。因为没有名为only的设备，老式浏览器不会应用样式。当不使用only时，只需解释@ media screen and(min-width : 992 px){.} as screen，忽略查询的其余部分并应用样式。
0x02断点断点是响应式设计的基石。它是一个可自定义的宽度，可用于控制何时在特定视口或设备大小中调整布局。
断点设置参考Bootstrap的响应式设计，预设了xs、sm、md、lg、xl五种响应大小。
断点
类中缀
解决
装备
X-Small
特小号
767像素
超大屏手机
小的
钐
768像素
小屏幕平板电脑
中等
钔
992像素
中等屏幕桌面显示器
大的
水准仪
1200像素
大屏幕桌面显示器
特大号
特大号
1920像素
大屏幕和大型桌面显示器
这些断点在文件theme-chalk \ src \ common \ var . scss中定义。
/*断点- */$ – sm: 768px！违约；$ – md: 992px！违约；$ – lg: 1200px！违约；$ – xl: 1920px！违约；//断点映射$ -断点： (‘xs’ 3360(最大宽度3360 $-sm-1，)，’ sm’ 3360(最小宽度3360 $-sm，)，’ md’ 3360(最小宽度’ LG ‘ : $-LG，)，’ xl’:(最小宽度： $ – xl，))；0x03组件响应实现@mixin res()在文件theme-chalk \ src \ mixins \ mixins . scss中定义了构建css的指令res，并使用媒体查询来创建分界点的临界阈值。
/* break-points-*//断点映射$-断点3360 (‘xs’ 3360(最大宽度3360 767px))，’ ‘ ‘ md’:(最小宽度： 992px)，’ lg’:(最小宽度： 1200px)，’ xl’:(最小宽度： 1920px)，)；@ mixinres ($ key，$ map : $-breakpoints){//循环断点映射，如果存在，返回@ ifmap-has-key ($ map，$ key) {@ mediaonlyscreen和# {inspect (map-get ($ map，$ key))} } @ else { @ warn ‘ undefined points : `# { $ map } ` ‘；}}指令的功能逻辑如下：
指令res接受两个参数$key(响应大小)和$Map(断点映射)。指令中的函数map-has-key($map，$key)用于根据$key参数返回$map中$key的值。如果$map中不存在$key，它将返回一个空值(在这种情况下，生成的警告断点不定义未定义的点)。如果为true，使用函数map-get($map，$key)返回$map中$key的值。使用inspect($value)函数将其转换为字符串，并使用内插法# {}和@content生成媒体查询。//参数$key值为xs//Get map-Get($ map，$ key)=(max-width 3360 767 px)//Return string SPECT(map-Get($ map，$ key))='(max-width : 767 px)’ @ media only screen和#{inspect(map-get($map，$ key))} { @ content；}//编译结果@ media only screenand(max-width : 767 px){.}在网格系统中，媒体查询通过断点构建CSS。响应式布局的五种响应大小样式如下：
/*超小屏幕(手机，小于768px) */@ mediaonly屏幕和(最大宽度： 767px) {.}/*小屏幕(平面，大于768像素)*/@ mediaonly screenand(最小宽度： 768像素){.}/*中等屏幕(桌面显示器，大于或等于992像素)*/@ mediaonly screenand(最小宽度： 992像素){.}/*大屏幕(大型桌面显示器，大于或等于1200px) */@ mediaonly screenand(最小宽度3360 1200px) {.}/*大屏幕(大型桌面显示器，大于或等于1920px) */@ mediaonly screenand(最小宽度3360 1920px) {.}0x04基于断点的隐藏实现元素提供了附加的
用法：首先，项目引入一个样式文件：
导入“element-ui/lib/theme-chalk/display . CSS”；然后可以将这些类名添加到任何DOM元素或定制组件中。
Hidden-xs-only-hidden-sm-only当视窗处于xs尺寸时-hidden-sm-and-down当视窗处于sm尺寸时-hidden-sm-and-up当视窗处于sm尺寸及以上时-hidden-MD-only当视窗处于sm尺寸及以上时。视口为md及以下时隐藏-md-and-down-隐藏-lg-仅视口为MD及以上时隐藏-lg-and-down视口为lg及以下时隐藏h视口为LG及以下ID-LG-and-UP-隐藏视口为LG及以上时隐藏-xl-仅当视口为XL时隐藏实现原理文件。theme-Chalk \ src \ common \ var . scss定义了隐藏断点映射$ Map$ – breakpoints-spec，它使用逻辑运算符AND使媒体查询跨越多个断点宽度。
$ -断点-spec:(‘仅xs’:(最大宽度： $ – sm – 1)、“sm-and-up”:(最小宽度： $ – sm)，’仅sm ‘ : ‘(最小宽度： #{$ – sm})和（最大宽度： #{$ – md – 1})’，’ sm-and-down’:(最大宽度仅LG ‘ : ‘(最小宽度： #{$ – lg})和（最大宽度： #{$ – xl – 1})’，’ LG-向下’ :(最大宽度： $ – xl – 1)，’仅XL’:(最小宽度： $ – xl)，)；转译后内容如下，定了关于视口宽度的各种媒体查询规则。
$ -断点-spec:(‘仅xs’:(最大宽度： 767px)、“sm-and-up”:(最小宽度： 768px)，’仅sm ‘ :(最小宽度： 768像素)和（最大宽度： 991px)、“sm-and-down”:(最大宽度33366使用指令表示留数生成带前缀隐藏的的隐藏类。隐藏类半铸钢钢性铸铁(铸造半钢)规则显示：无！重要；用于隐藏元素。
//类前缀。隐藏的{ //遍历在$ -断点-规格中映射$-breakpoints-spec @ each $ break-point-name，$ value {//生成。隐藏-#{$break-point-name}如hidden-xs-only hidden-sm-only-# { $ break-point-name } {//生成媒体查询@include res($break-point-name，$-breakpoints-spec){ display : none！重要；} } }}最终生成显示. css内容如下：
//当视口在` x ‘尺寸时@仅媒体屏幕和(max-width: 767px) { /* .隐藏-仅xs */}//当视口在` sm ‘及以上尺寸时@仅媒体屏幕和(最小宽度： 768像素){ /* .hidden-sm-and-up */}//当视口在` sm ‘尺寸时@仅媒体屏幕和（最小宽度： 768像素)和（最大宽度： 991px) { /* .隐藏-仅sm */}//当视口在` sm ‘及以下尺寸时@仅媒体屏幕和(max-width: 991px) { /* .隐藏-sm-and-down */}//当视口在` md ‘及以上尺寸时@仅媒体屏幕和(最小宽度： 992px) { /* .hidden-md-and-up */}//当视口在` md ‘尺寸时@仅媒体屏幕和（最小宽度： 992px)和（最大宽度： 1199px) { /* .隐藏-仅MD */}//当视口在` md ‘及以下尺寸时@仅媒体屏幕和(max-width: 1199px) { /* .隐藏-纵向向下*/}//当视口在“lg”及以上尺寸时@仅媒体屏幕和(最小宽度： 1200像素){ /* .hidden-lg-and-up */}//当视口在“lg”尺寸时@仅媒体屏幕和（最小宽度： 1200像素)和（最大宽度： 1919px) { /* .隐藏-仅LG */}//当视口在“lg”及以下尺寸时@仅媒体屏幕和(max-width: 1919px) { /* .隐藏-lg和向下*/}//当视口在` xl ‘尺寸时@仅媒体屏幕和（最小宽度： 1920像素