简要概述 CSS3媒体查询

作者:iVampireSP.com 发布日期:2020年11月18日
分类:野生技术协会

在不同分辨率下我们想让页面呈现不同效果,可以用CSS3 媒体查询来实现

让你的网页适配移动端

这可以使用HTML的meta标签来实现:声明一个viewport

代码示例

参考文档:https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

如果对该属性有些疑问,可以参考上方的网址来查看详细文档。

为什么要适配移动端?

  1. 你的用户不一定全部是桌面端用户
  2. 多设备的兼容性
  3. 高大上(确实)
  4. 增加拓展性

如果不加该meta属性,则移动端会不缩放,显示PC端的界面

媒体查询

我们先写一个示例div,然后给他样式

代码:

效果图:

此时我们缩放视图

可见这个div溢出了,所以出现了滑动条。

但是我们想让视图缩小时div的样式跟着改变,此时我们可以用到媒体查询

@media是声明一个媒体查询,括号中加上条件,如max(最大宽度)和min(最小宽度),再加上花括号,里面加上选择器。

上图代码的意思是:在默认情况下#test选择器的宽度为1000px,高度为10000px,背景颜色为红色;当视图最大宽度为600时,#test选择器的宽度为500px,高度为500px,背景颜色为绿色。

此时我们缩放页面:

最大宽度为600(小于等于600):

大于600像素:

可以看到样式发生了变化

Author: iVampireSP.com

标签:

下一篇

JavaScript 朗读文本,播放声音

本页面或文章发布已经有很长一段时间了(长达几个月甚至几年),其指向的内容可能已经发生了改变,或者不再可用。

"简要概述 CSS3媒体查询"
中有5条评论

  1. 纯之说道:

    😜过来逛逛,学到了🤩!

  2. ICU俱乐部 南初说道:

    大佬大佬爱

    1. iVampireSP.com说道:

      不至于不至于不至于

  3. 笔稽菌说道:

    大佬又更新了

    1. iVampireSP.com说道:

      不敢当不敢当,这连皮毛都不如

留下足迹

Crafted with love by iVampireSP.com开往Travellings