CSS媒体查询
本帖最后由 马黑黑 于 2025-3-7 13:09 编辑 <br /><br /><style>.artbox p { margin: 10px 0; }
.artbox mark { background: lightblue; }
</style>
<div class="artbox">
<p>追求完美的web页制作者在设计网页尺寸时应当需要考虑适配不同类型的显示设备。实现响应式布局的方法非常多，其中，基于CSS的媒体查询最值得入手，它经济而高效，除了能令设计对象适配各种大小尺寸的终端显示设备，还有可能响应浏览器窗口的相关变化。</p>
<p>CSS媒体查询可以检查视口宽高、设备宽高、设备的分辨率乃至设备的方向。借助它我们可以让页面或元素的尺寸适应不同尺寸的显示设备。参考下面的代码：</p>
<div id="hEdiv"><pre id="hEpre">
<style>
.div1 {
margin: 0 auto;
width: 1200px; /* 宽度预设为1200px */
height: 460px;
background: lightblue;
}
/* 屏幕宽度为1280px时 div1的宽度为90%并改变背景色为粉红 */
@media screen and (max-width: 1280px) {
.div1 {
width: 90%;
background: pink;
}
}
</style>
<div class="div1"></div>
</pre></div>
<p><button id="btnPrev" type="button">点击查看效果</button></p>
<p>（运行后可以点击浏览器右上方的向下还原/最大化按钮改变浏览器界面大小以观察上面div的变化）</p>
<p>CSS媒体查询需要用到 @media 选择器，简单语法为：</p>
<p><mark>@media 媒体类型 and (媒体属性特征) { css代码 }</mark></p>
<p>代码示例中，媒体类型我们使用 screen，指向屏幕，媒体属性特征我们指定 max-width 即 screen 显示区域的最大宽度，这一部分表示：检查设备的 screen 媒体，若其显示区域最大宽度为1280px，则按随后的CSS代码执行相关行为；而其内的CSS代码，我们针对 .div1 选择器做相关设置，有宽度和背景色。整个媒体查询代码的意思是：以显示设备最大宽度1280px为分界，达到要求的按预设（即宽1200px、背景淡蓝色）渲染 .div1，否则，按其内的属性设置（即90%宽度、粉红背景）渲染。</p>
<p>关于screen，在实际应用中发现，它除了能够检查到应物理设备，也可以检查浏览器的视口，功能相当于甚至强于JS基于window的resize监听事件，这意味着直接改变浏览器窗口的尺寸就可以感受到上述代码实际运行效果，无需切换显示终端。</p>
<p>上述基于@media媒体查询的代码逻辑理解起来可能有点费劲，因为CSS缺乏对应的条件语句。不过可以研读代码，然后亲手测试，慢慢可以体会出来。</p>
<p>css媒体查询不是一个简单的知识系统，它所涉及的媒体类型不少，媒体属性特征更多，但我们常用到的其实只是一小部分，可以根据需要查阅相关知识。</p>
</div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
btnPrev.onclick = () => runCodes(hEpre.textContent);
function runCodes(str) {
const previewWindow = window.open('', 'prev1', 'width=1280,height=720');
previewWindow.document.open();
previewWindow.document.write(str);
previewWindow.document.close();
};
</script>
这个厉害了，这么几行代码就能进行屏幕检查，黑黑还特地用两种颜色来演示得到的结果。
这个还是第一次接触功能呢，学习了{:4_187:} 它怪智能的呀。看代码是蓝色先显，如果到1280才改为粉色。。
显示是反过来的？ 花飞飞 发表于 2025-3-7 18:46
它怪智能的呀。看代码是蓝色先显，如果到1280才改为粉色。。
显示是反过来的？
它不是反过来，是CSS的逻辑可能不符合你所熟悉的表述，文中有提到的 红影 发表于 2025-3-7 14:22
这个厉害了，这么几行代码就能进行屏幕检查，黑黑还特地用两种颜色来演示得到的结果。
这个还是第一次接触 ...
我拿简单的来说道说道，其实它挺复杂的
还有这screen，滤镜里用得最多了。。
这里表示媒体类型。。英语的一词多用也多呀。{:4_173:}
网页设计的学问挺多，还都是从使用者体验方考虑的。。感觉这就是新编辑器预览变大小的原理 马黑黑 发表于 2025-3-7 18:47
它不是反过来，是CSS的逻辑可能不符合你所熟悉的表述，文中有提到的
{:4_173:}嗯嗯，我再去瞅瞅，把它掰过来 花飞飞 发表于 2025-3-7 19:31
嗯嗯，我再去瞅瞅，把它掰过来
应该不难理解 马黑黑 发表于 2025-3-7 19:32
应该不难理解
书读百遍，其义自现 花飞飞 发表于 2025-3-7 19:35
书读百遍，其义自现
有些原理读多少遍都没用，数学和逻辑学要好 花飞飞 发表于 2025-3-7 18:51
网页设计的学问挺多，还都是从使用者体验方考虑的。。感觉这就是新编辑器预览变大小的原理
你网站上的简易编辑器是酱紫，已经考虑了低物理分辨率设备 长知识了，谢谢马老师精彩分享{:4_191:} 杨帆 发表于 2025-3-7 20:17
长知识了，谢谢马老师精彩分享
{:4_190:} 马黑黑 发表于 2025-3-7 19:42
有些原理读多少遍都没用，数学和逻辑学要好
{:4_173:}说来说去还是数学的事儿。 花飞飞 发表于 2025-3-7 20:40
说来说去还是数学的事儿。
一切离不开数学 马黑黑 发表于 2025-3-7 18:47
我拿简单的来说道说道，其实它挺复杂的
怪不得黑黑说css也是挺复杂的呢{:4_187:} 红影 发表于 2025-3-7 22:22
怪不得黑黑说css也是挺复杂的呢
它没有条件语句、循环语句、嵌套语句之类的规范，逻辑表达方面很弱也很抽象但在CSS3偏偏集成了部分此类功能。估计下一个版本会有所扩展，编程性能会好得多，逻辑就会更清晰。 马黑黑 发表于 2025-3-7 22:46
它没有条件语句、循环语句、嵌套语句之类的规范，逻辑表达方面很弱也很抽象但在CSS3偏偏集成了部分此类功 ...
这个也很有用处呢{:4_187:} 红影 发表于 2025-3-7 23:12
这个也很有用处呢
将来会完善的，但它又不能像JS哪样，否则到处是编程也不好，适可而止，专门解决一些问题即可