@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的更多相关文章

  1. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  2. CSS3 media 入门

    css3 media  严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media  语法: @media mediatype a ...

  3. 使用CSS3 Media Queries实现网页自适应

    原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...

  4. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  5. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  6. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  7. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  8. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  9. CSS3 Media Queries模板

    使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...

  10. CSS3 Media Queries在iPhone4和iPad上的运用

    CSS3 Media Queries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少.前几天在<修复iPhone上submit按钮bug>上介绍了 ...

随机推荐

  1. Struts2——namespace、action、以及path问题

    简单的介绍下Struts2中的几个简单的问题(namespace.action.以及path问题) namespace(命名空间) Namespace决定了action的访问路径,默认为“”,意味着可 ...

  2. python之路--MRO和C3算法

    一 . MRO(method resolution order) 多继承的一种方法,一种查找的顺序 在python3 里面是一种新类式MRO 需要用都的是C3算法 class A: pass clas ...

  3. GlusterFS 安装配置

    1.磁盘格式化 mkfs.xfs -i size=512 /dev/vdb1 mkdir -p /data/brick1 cat > /etc/fstab <<EOF /dev/vd ...

  4. C#中is运算符

    is运算符可以检查对象是否与特定的类型兼容.“兼容”表示对象或者该类型,或者派生自该类型.例如,要检查变量是否与object类型兼容,可以使用下面的代码: int i=10; if(i  is  ob ...

  5. Eclipse报错：An internal error has occurred. Widget is disposed

    win10家庭版报错. 右键Eclipse的快捷方式,在兼容性窗口的兼容模式中,将“以兼容模式运行这个程序”选项打对勾.选择win8就可以解决问题.

  6. Git拉取项目时报错“remote: HTTP Basic: Access denied”解决方法

    问题: Git拉取项目时报错“remote: HTTP Basic: Access denied”,此问题多为本地密码与远端密码不符导致. 解决方法: 在下载地址中加上用户名和密码即可,如下: htt ...

  7. PDO访问Mysql数据库

    $dsn = 'mysql:host=127.0.0.1;dbname=myblog'; $username = 'root'; $pwd = '; $pdo = new PDO($dsn,$user ...

  8. poj-2823（单调队列）

    题意:给你长度位n的数组,问每个长度为m的段的最值: 解题思路:这道题是单调队列的入门题: #include<iostream> #include<algorithm> #in ...

  9. 非阻赛IO模型

    实例一: 只能在waitdata 阶段找到IO的解决方案 from concurrent.futures import ThreadPoolExecutor import socket server ...

  10. scrapy入门与进阶

    Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页内容以及各种图片,非 ...