首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简要概述 CSS3媒体查询

简要概述 CSS3媒体查询

作者头像
iVampireSP.com
发布2020-11-19 10:19:13
7310
发布2020-11-19 10:19:13
举报
文章被收录于专栏:iVampireSPの物语iVampireSPの物语

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-11-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 让你的网页适配移动端
  • 媒体查询
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档