CSS : @media 示例
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
} /* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
} /* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
} /* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
} /* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
CSS : @media 示例的更多相关文章
- 深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
- CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- [CSS3] CSS Media Queries
Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...
- Web之CSS开发技巧: CSS @media
CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...
- 一些实用的CSS Media Query代码片段,个人采集
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- css:Media Queries: How to target desktop, tablet and mobile?
<!doctype html> <html> <head> <meta name="viewport" content="wid ...
- mobile adaptor & css media query
mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...
随机推荐
- 10474 - Where is the Marble?(模拟)
传送门: UVa10474 - Where is the Marble? Raju and Meena love to play with Marbles. They have got a lot o ...
- ActiveX控件注册不起作用的解决办法
公司写了一个ActiveX打印插件.其中一个同事的电脑死活不能用.于是我就上网找办法 这位兄弟写的比较清晰. ActiveX交互时浏览器的设置以及ActiveX控件注册的检测 http://blog. ...
- AngularJS 四 服务
AngularJS服务: API: https://docs.angularjs.org/api/ng/service 下面只会介绍几种,需要的话可以去官网查看 AngularJS服务 ...
- Entity Framework 五
连接情景中的CRUD操作: 连接场景中的CRUD操作是一项相当简单的任务,因为默认情况下,上下文会自动跟踪实体在其生命周期中发生的更改,前提是AutoDetectChangesEnabled为true ...
- JS JavaScript实现杨辉三角
1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 ........ 观察这样的一组数,找出规律,用控制台输出这样规律的数 规律:这 ...
- group by 注意的细节 ,
1. GROUP BY子句必须出现在WHERE子句之后,ORDER BY子句之前. HAVING语句必须在ORDER BY子句之后.(where先执行,再groupby分组:groupby先分组,ha ...
- logback.xml模板详解
<?xml version="1.0" encoding="UTF-8"?> <!-- 配置文件每隔1分钟,就检查更新 --> < ...
- dropload上拉加载更多
<link href="~/Scripts/dropload/dropload.min.css" rel="stylesheet" /> <s ...
- Largest Rectangle in a Histogram(hdu1506,单调栈裸题)
Largest Rectangle in a Histogram Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- leetcode笔记(三)207. Course Schedule
题目描述(原题目链接) There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may ...