@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. Django Rest framework 框架之认证使用和源码执行流程

    用这个框架需要先安装: pip3 install djangorestframework 如果写了一个CBV的东西,继承了View. # 继承Django里面View class APIView(Vi ...

  2. CBV源码分析+APIVIew源码分析

    {drf,resful,apiview,序列化组件,视图组件,认证组件,权限组件,频率组件,解析器,分页器,响应器,URL控制器,版本控制} 一.CBV源码分析准备工作: 新建一个Django项目 写 ...

  3. mycat - 水平分表

    相对于垂直拆分的区别是:垂直拆分是把不同的表拆到不同的数据库中,而水平拆分是把同一个表拆到不同的数据库中.水平拆分不是将表的数据做分类,而是按照某个字段的某种规则来分散到多个库之中,每个表中包含一部分 ...

  4. delphi 怎么实现主窗口退出时，有一个提示框？

    无论点窗口上的[按钮]还是[右上角的叉],能出现一个提示窗口,“是”-退出窗口,“否”-重新登录(调出登录窗口),“取消”-返回.MessageBox能实现吗?还是要调用新窗口(我调用窗口,有些错误) ...

  5. Arrays类

    package cn.zhou.com; import java.util.Arrays; /* * Arrays 类 ? * * 数组工具类 操作数组! * * Arrays的方法? * * */ ...

  6. openblas下载安装编译

    编译好的库: https://github.com/JuliaLinearAlgebra/OpenBLASBuilder/releases 源码编译 下载:https://github.com/xia ...

  7. Web API 配置Help Page

    当你创建一个web API,它通常用于创建一个帮助页面,以便其他开发人员知道如何调用你的API.你可以手动创建所有的文档,但最好是autogenerate尽可能多. 简化这个任务,ASP.Web AP ...

  8. Promise实现队列

    有时候我不希望所有动作一起发生,而是按照一定顺序,逐个进行 var promise=doSomething(); promise=promise.then(doSomethingElse); prom ...

  9. BZOJ3894文理分科——最小割

    题目描述  文理分科是一件很纠结的事情!(虽然看到这个题目的人肯定都没有纠 结过)  小P所在的班级要进行文理分科.他的班级可以用一个n*m的矩阵进行 描述,每个格子代表一个同学的座位.每位同学必须从 ...

  10. BZOJ4849[Neerc2016]Mole Tunnels——模拟费用流+树形DP

    题目描述 鼹鼠们在底下开凿了n个洞,由n-1条隧道连接,对于任意的i>1,第i个洞都会和第i/2(取下整)个洞间有一条隧 道,第i个洞内还有ci个食物能供最多ci只鼹鼠吃.一共有m只鼹鼠,第i只 ...