CSS3自适配手机屏幕[转]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Media Query Demos【CSS3自适配手机屏幕】</title>
<style type="text/css">
.wrapper {
border: solid 1px #666;
padding: 5px 10px;
margin: 40px;
} .viewing-area span {
color: #666;
display: none;
} /* max-width */
@media screen and (max-width: 600px) {
.one {
background: #F9C;
}
span.lt600 {
display: inline-block;
}
} /* min-width */
@media screen and (min-width: 900px) {
.two {
background: #F90;
}
span.gt900 {
display: inline-block;
}
} /* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
.three {
background: #9CF;
}
span.bt600-900 {
display: inline-block;
}
} /* max device width */
@media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
</style>
</head> <body>
<div class="wrapper one">此框会变成粉红色，如果可视面积小于600px</div>
<div class="wrapper two">此框会变成橙色，如果可视面积小于900px</div>
<div class="wrapper three">此框会变成蓝色，如果可视面积为600px~900px</div>
</body>
</html>
CSS3自适配手机屏幕
http://hi.baidu.com/58zhongguo/item/c4da7bd761d22bc71a72b4d0?qq-pf-to=pcqq.c2c
CSS3自适配手机屏幕[转]的更多相关文章
- CSS3自适配手机屏幕
@media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./im ...
- JSP 适配手机屏幕
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scal ...
- 了解真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- web app变革之rem（手机屏幕实现全适配）
以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...
- 了解真实的rem手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- Android开发——Android手机屏幕适配方案总结
)密度无关像素,单位为dp,是Android特有的单位 Android开发时通常使用dp而不是px单位设置图片大小,因为它可以保证在不同屏幕像素密度的设备上显示相同的效果. /** * dp与px的转 ...
- 真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高
1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...
- Unity3d 手机屏幕自动适配
我提到手机自动适配的一个方法中:postion和Scale,“比例”概念适配手机.原始资源是480*800 经过实际项目考验,个人感觉: 1,UICamera是自动适配分辨率,UI上也是拉伸.放大UI ...
随机推荐
- React JS高速新手教程
翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.n ...
- PHP设计模式——备忘录模式
声明:本系列博客參考资料<大话设计模式>,作者程杰. 备忘录模式又叫做快照模式或Token模式,在不破坏封闭的前提下.捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对 ...
- ubuntu12.04 残疾人游客
为了防止陌生人登录你的ubuntu系统.例如,下面的方法,可以采用禁用 游客登录. sudo vi /etc/lightdm/lightdm.conf 在 lightdm.conf 文件末尾加入上 a ...
- Java并发编程：线程池的使用（转）
Java并发编程:线程池的使用 在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了, ...
- IT只忍者龟Photoshop简单人像的头发抠图过程
一.导入素材,加入蒙版 1.导入美女图片 2.导入背景图片 如今须要将美女抠出来放在这个背景上,怎么办?一定会有人想到用通道,抽出.(备注:在ps6以后版本号,抽出已经没有这个选项了). 3.将美女图 ...
- Linux centos 主机名颜色设置 和 别名设置
方便和乐趣写今天.至于为什么主机名颜色设置 和 别名设置放在一起写.这是因为他们的设置是在一个文件中..bashrc. .bashrc放在cd /root 这个文件夹下! 这个文件主要保存个人的一些个 ...
- 为 Oracle Database 开发 WCF Data Services 和 OData 应用程序
为 Oracle Database 开发 WCF Data Services 和 OData 应用程序 本教程包含以下部分: 目的 所需时间 概述 先决条件 创建新的网站项目 ...
- ASP.NET WebAPI从入门
在新出的MVC4中,增加了WebAPI,用于提供REST风格的WebService,新生成的WebAPI项目和典型的MVC项目一样,包含主要的Models.Views.Controllers等文件夹和 ...
- Canvas旋转图片--保持相同大小的算法
function drawImg(angle) { canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...
- EF4.1: Add/Attach and Entity States（EF中的实体状态转换说明）
实体的状态,连接以及 SaveChanges 方法 数据库上下文对象维护内存中的对象与数据库中数据行之间的同步.这些信息在调用 SaveChanges方法被调用的时候使用.例如,当使用 Add 方法传 ...