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 ...
随机推荐
- Team Foundation Server 2015使用教程--新增权限为读取器的团队
- Robot Framework 使用1-环境配置及简单网站兼容性测试（转）
0.Robot Framework 简介 Robot Framework 是一个通用的自动化测试框架,主要用于“验收测试”和“验收测试驱动开发(ATDD)” (会其它文章中会详细介绍ATDD).它使用 ...
- python 3.4.0 简单的print 'hello world',出错--SyntaxError: invalid syntax
问题描写叙述: win7下安装的python 3.4.0版本号, 在命令行里写入简单的输出语句: print 'hello world' 然后enter,结果返回结果为: SyntaxError: i ...
- WP8加入自己定义铃声
1.下载千千静听绿色版,下载地址:http://pan.baidu.com/s/1ntuSNOH 2.将目标铃声加入到千千静听,选中铃声,右键选文件属性. 3.改动文件属性,将流派改为"Ri ...
- 如何关闭CBox（2.4版本号）强制升级的形式
从今天开始2.4.0.9版本号CBox,提示检测到新的版本号,能够使用后必须更新为新版本号,提示表见下面的例子. 此次升级是强制升级.假如你选择不升级(单击窗体上的升级提示右下角"辍学but ...
- REST API出错响应的设计（转）
REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...
- iOS学习笔记---简单的学习总结
1.xcode6.0官方的版本必须是OS X10.9.4而以上的版本安装前: 2,xcode6.0正式版创建命令行项目时,无法选择swift语言:可是创建iOS应用项目时能够选择swift语言. 3, ...
- SQL Server使用规范
原文:SQL Server使用规范 常见的字段类型选择 1.字符类型建议采用varchar/nvarchar数据类型 2.金额货币建议采用money数据类型 3.科学计数建议采用numeric数据类型 ...
- react学习笔记2--练习Demos
准备工作 # 0.react核心库 <script src="../build/react.js"></script> # 将JSX 语法转为 JavaSc ...
- js json string 互转
字符串转对象(strJSON代表json字符串) var obj = eval(strJSON); var obj = strJSON.parseJSON(); var obj = JSON.pars ...