网站建设二公司,福步外贸论坛网官网,做网站卖赚钱吗,装修设计网页版目录#xff1a;
媒体查询介绍网页常用分界点 一、媒体查询介绍 媒体特性#xff1a; width 视口的宽度 height 视口的高度 一般设计的时候#xff0c;高度不考虑#xff0c;只考虑宽度
//当视口的宽度是500像素的时候,变颜色media (width: 500px) {body{background-colo…目录
媒体查询介绍网页常用分界点 一、媒体查询介绍 媒体特性 width 视口的宽度 height 视口的高度 一般设计的时候高度不考虑只考虑宽度
//当视口的宽度是500像素的时候,变颜色media (width: 500px) {body{background-color: #bfa;}}问题这里的500px太过于精确。 解决 优化下用范围更灵活。 min-width 视口的最小宽度(视口大于指定宽度时生效) max-width 视口的最大宽度(视口小于指定宽度时生效) /* 大于500就变颜色 */media (min-width: 500px) {body{background-color: #bfa;}}二、网页常用分界点 样式切换的分界点我们称其为断点也就是网页的样式会再这个点时发生变化 比如看到的很多网页当视口不断缩小到某个点会突然变成竖屏界面展示 。 各种范围上限,大部分网站用的是这个规则小于768 超小屏幕 max-width768px 比如手机大于768 小屏幕 min-width 768px 大于992 中型屏幕 min-width 992px ipad大于1200 大屏幕 min-width 1200px/* 大于500就变颜色 */media (min-width: 500px) {body{background-color: #bfa;}}/* 大于500或者小于700变颜色 */media (min-width: 500px), (max-width:700px) {body{background-color: #bfa;}}/* 如果写500 到 700之间 and 与 */media (min-width: 500px) and (max-width:700px) {body{background-color: #bfa;}}/* 表示除了500 - 700之外 */media not screen (min-width: 500px) and (max-width:700px) {body{background-color: #bfa;}}这种写法是最常用的写法 /* 完整写法加上媒体类型 only screen*/media only screen (min-width: 500px) and (max-width:700px) {body{background-color: #bfa;}}
