@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. dart正则

    1.前言 API中对于正则表达式的注释是:正则表达式的规范和语义与JavaScript相同详细的规范可以参考:http://ecma-international.org/ecma-262/5.1/#s ...

  2. git修改用户名、邮箱

    在windows使用git命令方法如下(以win7为例):1.msysgit 是 Windows 版的 Git可以百度搜索Git下载.2.安装完成后,开始菜单里找到“Git”->“Git Bas ...

  3. Struts2——通配符,Action Method_DMI

    Action wildcard 通配符(配置量降到最低) 使用通配符,就是为了配置简便,但是一定遵守“约定优于配置”原则,约定就是做项目之前最好事先与项目组的人或是自己规定好命名规则. 多个*  {1 ...

  4. Kettle 变量(arg位置参数)

    1.表输入中使用?占位作为kettle转换变量 数据预览: 获取变量数据: 使用?传入变量 需要勾选替换sql语句中的变量,并选则从步骤插入数据中所在步骤 数据预览

  5. python之路--JavaScript

    一. JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,希望这门语言能成为国际化标准,于是决定将Jav ...

  6. C#后台绑定select

  7. LODOP打印控件进行批量打印

    Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...

  8. 自定义 ASP.NET Identity Data Model with EF

    One of the first issues you will likely encounter when getting started with ASP.NET Identity centers ...

  9. PC平台的SIMD支持检测

    如果我们希望在用SIMD来提升程序处理的性能,首先需要做的就是检测程序所运行的平台是否支持相应的SIMD扩展.平台对SIMD扩展分为两部分的支持: CPU对SIMD扩展的支持.SIMD扩展是随着CPU ...

  10. js 异步代码

    这段时间一直在用node.js做毕设的后台,所以需要一些异步代码操作,主要的异步方式有:Promise.Generator 和 async / await,但下面主要讲 Promise 和 async ...