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>上介绍了 ...
随机推荐
- scrapy暂停和重启,及url去重原理,telenet简单使用
一.scrapy暂停与重启 1.要暂停,就要保留一些中间信息,以便重启读取中间信息并从当前位置继续爬取,则需要一个目录存放中间信息: scrapy crawl spider_name -s JOBDI ...
- 利用Python实现“指尖陀螺”,让你释放压力
前言 利用Python实现“指尖陀螺”,让你释放压力 基本环境配置 版本:Python3 系统:Windows 相关模块:turtle 实现效果 不停点击键盘空格键,这个陀螺会慢慢加速,从而达到一个减 ...
- python3高级编程
1. SMTP发送邮件 internet相关协议: http:网页访问相关,httplib,urllib,xmlrpclib ftp:文件传输相关, ftplib, urllib nntp:新闻和帖子 ...
- Vue之v-for、v-show使用举例
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- c++ 的绝对值函数
添加头文件 #include <cmath> 对于整数 abs(); 对于浮点数 fabs();
- gym-101350D
题意:给你一个数组,你每次可以是其中一个数减一,数组其他元素加一,问是否能够相等,这个数组的所有元素. 解题思路:将数组从小到大排序,只要后一项减去当前项的值是奇数就行了. 代码: #include& ...
- 洛谷 P1112 波浪数
题目描述 波浪数是在一对数字之间交替转换的数,如 121212112121211212121 ,双重波浪数则是指在两种进制下都是波浪数的数,如十进制数 191919191919191919 是一个十进 ...
- 关于Binder,作为应用开发者你需要知道的全部
作者:rushjs https://www.jianshu.com/p/062a6e4f5cbe github 地址: https://github.com/rushgit/zhongwenjun.g ...
- Spring 使用介绍(五)—— AOP(一)
一.简单使用:Hello World实例 1.定义目标类 public interface Hello { void sayHello(); } public class HelloImpl impl ...
- HTML5-canvas-基础篇
<canvas>新元素 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来 ...