iVampireSP的物语

简要概述 CSS3媒体查询

在不同分辨率下我们想让页面呈现不同效果,可以用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

Exit mobile version