媒体查询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 ...
随机推荐
- 【知识详解】Https详解
Https详解 1.什么是Https Http + SSL = Https 一句话说:Https是身披SSL的Http,当使用了SSL后,Http先和SSL通信,再由SSL和TCP通信, 2.为什么需 ...
- dragover event 翻译
当选择的元素或文本被拖拽到一个有效的放置目标上时(每几百毫秒),dragover事件就会被触发. 该事件在放置目标上被触发. Property Type Description target Read ...
- JavaEE在线就业班2.0-（1）-《博学谷》
JavaEE在线就业班2.0学习笔记 1. Java概述 1.1 Java语言背景介绍(了解) 语言:人与人交流沟通的表达方式计算机语言:人与计算机之间进行信息交流沟通的一种特殊语言Java语言是美国 ...
- 我，35岁Android开发，高龄入职鹅厂，试用期未过被劝退......今年实惨
今天,笔者盘点.综合分享一位腾讯员工的"心声".这份心声中干货还是不少的,主要关于腾讯的一些职场生活--希望这些"干货"能对你有所帮助. 什么部门?给补偿吗? ...
- Java注解如何对属性动态赋值
学而不思则罔,思而不学则殆 前言 大家都用过Spring的@Value("xxx")注解,如果没有debug过源码的同学对这个操作还是一知半解,工作一年了学了反射学了注解,还是不会 ...
- Openresty Lua协程调度机制
写在前面 OpenResty(后面简称:OR)是一个基于Nginx和Lua的高性能Web平台,它内部集成大量的Lua API以及第三方模块,可以利用它快速搭建支持高并发.极具动态性和扩展性的Web应用 ...
- Shell-06-正则表达式
正则表达式 shell正则表达式分为两种 基础正则表达式:BRE 扩展正则表达式:ERE,扩展的表达式有 + .? .| 和 () 元字符表 * 匹配0次或多次 更多请查看相关网站 http://ww ...
- 【Vulnhub】 DC-4 靶机
Vulnhub DC-4 一.环境搭建 下载链接:https://www.vulnhub.com/entry/dc-4,313/ 解压后用VMware打开,导入虚拟机 网卡配置看个人习惯,我喜欢NAT ...
- msfvenom简介
写此文是因为网上资料杂乱,不方便查阅,辣眼睛 测试免杀的时候刚好用到这个功能,顺便写一下(0202年靠msfvenom生成的纯原生payload可以宣告死亡了,如果有查不出来的杀软可以退群了,这也叫杀 ...
- Git连接github以及gitee等使用教程
Git连接github以及gitee等使用教程 一.初始化本次仓库 在想要放置仓库的文件夹出git bash输入命令 git init 二.生成ssh 在github或者gitee注册账户, 在本地生 ...