媒体查询media query
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>媒体查询-策略</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
padding-top: 200px;
}
img{
width: 100%;
height: 100%;
}
.row{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col{
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(86,61,124,0.15);
border: 1px solid rgba(86,61,124,0.2);
} /* 断点
xs: < 576px
sm: 576 ~ 768px
md: 768 ~ 992px
lg: 992 ~ 1200px
xl: > 1200px 断点怎么来的：当改变屏幕大小的时候，页面会显示不正常，就需要设置断点了。
经验值，预设一些。 */ /* @media (max-width:576px){
.col{
width: 100%;
}
}
@media (min-width:577px) and (max-width:768px){
.col{
width: 50%;
}
}
@media (min-width:769px) and (max-width:992px){
.col{
width: 25%;
}
}
@media (min-width:993px) and (max-width:1200px){
.col{
width: 16.66666667%;
}
}
@media (min-width:1201px){
.col{
width: 8.333333333%;
}
} */ /* PC first 从宽到窄检测，后面的会覆盖前面的，如果检测到匹配的大小就会停止匹配后面的代码 */
.col{
width: 8.33333333%;
}
@media (max-width:1200px){
.col{
width: 16.66666667%;
}
}
@media (max-width:992px){
.col{
width: 25%;
}
}
@media (max-width:768px){
.col{
width: 50%;
}
}
@media(max-width:576px){
.col{
width: 100%;
}
} /* mobile first 从最小屏幕开始判断，从小往大设置的是下限，即min-width*/
.col{
width: 100%;
}
@media(min-width: 576px){
.col{
width: 50%;
}
}
@media (min-width:768px){
.col{
width: 25%;
}
}
@media (min-width:992px){
.col{
width: 16.66666667%;
}
}
@media (min-width:1200px){
.col{
width: 8.33333333%;
}
}
</style>
</head>
<body> <div class="row">
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
</div>
</body>
</html>
bootstrap的断点：
xs: < 576px 超小屏一般是手机
sm: 576px ~ 768px; 小屏一般是大屏手机
md: 768px ~ 992px 中屏一般是平板或小的显示器
lg: 992px ~ 1200px 大屏一般是显示器
xl: > 1200px 超大屏 断点怎么来的：当改变屏幕大小的时候，页面会显示不正常，就需要设置断点了。根据经验取得的值，预设一些。
mobile first优先
媒体查询media query的更多相关文章
- CSS3 之媒体查询Media Query
Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...
- 媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
- 响应式设计的思考:媒体查询(media query)
Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...
- 在javascript中使用媒体查询media query
由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...
- 媒体查询media参数以及其兼容性问题
一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
- 媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和 媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
随机推荐
- Leetcode:637. 二叉树的层平均值
Leetcode:637. 二叉树的层平均值 Leetcode:637. 二叉树的层平均值 Talk is cheap . Show me the code . /** * Definition fo ...
- 最大网络流dinic
初始化flow(最大流量)为INF(极大值),建边(正向弧和反向弧) bfs寻找增广路看看有没有路,顺便进行深度标号.如果没有路直接结束输出flow. 如果有,我们按照深度dfs.dfs时注意在给正向 ...
- golang可执行文件瘦身（缩小文件大小）
起因 golang部署起来极其遍历,但有时候希望对可执行文件进行瘦身(缩小文件大小) 尝试 情况允许情况下,交叉编译为32位 删除不必要的符号表.调试信息 尝试用对应平台的upx打压缩壳 解决 经过多 ...
- OOP-Klass模型 简略
class Model { public static int a = 1; public int b; public Model(int b) { this.b = b; } } public st ...
- OpenFaaS实战之六：of-watchdog(为性能而生)
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- helm离线安装helm-push插件
helm-push版本:helm-push_0.9.0_linux_amd64 helm-push安装包 百度云: 链接: helm-push_0.9.0_linux_amd64 提取码: 26b ...
- C语言复习(二)
引言: 不会将每一个部分都详述,只关注于一些自己认为重要的或常错的,若有不足,还望指出 switch()细节:括号内必须是整型或枚举类型:遇到break才会跳出:case包含的必须是常量 contin ...
- noip模拟22[d·e·f]
noip模拟22 solutions 哈哈哈,这次暴力打满直接190,其实不到哈哈哈,187.. 这次的题暴力极其好打,但是正解确实不简单... 打了好久才改完这个题,改完的时候爽暴了 这些一个字母的 ...
- Prometheus MySQL监控+grafana展示
前言 最近爱上了研究各种杂七杂八的技术. Prometheus是现如今最火的监控软件之一.做为一个运维DBA,不会这个可就OUT了. 本篇博客,演示一下prometheus之通过mysql expor ...
- HCIA-网络层包结构
网络层 关心-->转发 IPV4协议 IPV6协议 寻址 转发 标识位置 IPV6: 86DD MAC定位局部 网络定位全局 对于上层数据如果过大,网络层可以分组,实现分组转发 环路:发送了一个 ...