css3 media
@media screen and (max-width: 320px) {
.cloud{position: fixed;left:;top: 70%;width: 150px;}
.cloud2{position: fixed;right:;top: 30%;width: 50px;}
.cloud3{position: fixed;left:;top: 23%;width: 100px;}
}
@media screen and (min-width: 321px) and (max-width: 375px) {
.cloud{position: fixed;left:;top: 72%;width: 150px;}
.cloud2{position: fixed;right:;top: 32%;width: 50px;}
.cloud3{position: fixed;left:;top: 25%;width: 100px;}
}
@media screen and (min-width: 376px) {
.cloud{position: fixed;left:;top: 68%;width: 150px;}
.cloud2{position: fixed;right:;top: 32%;width: 50px;}
.cloud3{position: fixed;left:;top: 25%;width: 100px;}
}
@media screen and (max-height: 480px) {
.cloud{position: fixed;left:;top: 81%;width: 150px;}
.cloud2{position: fixed;right:;top: 35%;width: 50px;}
.cloud3{position: fixed;left:;top: 27%;width: 100px;}
}
css3 media的更多相关文章
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- CSS3 media 入门
css3 media 严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media 语法: @media mediatype a ...
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
- [转]CSS3 Media Query实现响应布局
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- CSS3 Media Queries 片段
CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- CSS3 Media Queries模板
使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...
- CSS3 Media Queries在iPhone4和iPad上的运用
CSS3 Media Queries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少.前几天在<修复iPhone上submit按钮bug>上介绍了 ...
随机推荐
- linux之nload和iftop查看网络使用情况
操作系统: centos7 nload: yum install -y gcc yum install -y gcc-c++ yum install -y ncurses-devel yum inst ...
- java学习之—链表(1)
/** * 单链表操作 * Create by Administrator * 2018/6/14 0014 * 下午 2:05 **/ public class Link { public int ...
- 关于wordpress更新提示无法创建目录问题
说说自己的看法和解决办法 看法: 网上很多人说:是权限问题,那么将文件目录权限设置为777就可以解决.恩,没错,是可以解决更新问题,可是却带来了更大的问题——安全.像他们这个设置后,网站被攻破,数据被 ...
- JarvisOJ Basic 美丽的实验室Logo
出题人丢下个logo就走了,大家自己看着办吧 扔进01Editor中,发现最后有14844个不属于jpg的字节 扔进Kali中用dd命令提取出附加的文件,可以看到也是一个图片,图片上的文字即是flag
- 实现中英文混合string的逆向输出
#include <iostream> using namespace std; // 输入一个字符串(包括英文和中文),将其反序输出, 如: // hello 今天真热 ---> ...
- 静态变量setter注入
1.java中静态方法调用非静态成员变量.非静态方法 public class Circle { private double radius = 1.0; double getAre() { retu ...
- BZOJ4849[Neerc2016]Mole Tunnels——模拟费用流+树形DP
题目描述 鼹鼠们在底下开凿了n个洞,由n-1条隧道连接,对于任意的i>1,第i个洞都会和第i/2(取下整)个洞间有一条隧 道,第i个洞内还有ci个食物能供最多ci只鼹鼠吃.一共有m只鼹鼠,第i只 ...
- 洛谷P2670扫雷游戏题解
题目 这道题是一个简单的模拟搜索题,可以把每个雷的位置都记作1. 这样就可记录出数字啦 #include<iostream> #include<cstring> using n ...
- 【XSY1580】Y队列 容斥
题目大意 给你\(n,r\),求第\(n\)个不能被表示为\(a^b(2\leq b\leq r)\)的数 \(n\leq 2\times {10}^{18},r\leq 62\) 题解 我们考虑二分 ...
- eclipse 保存html 提示 save could not be completed
重启ecplise 即可