<!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自适配手机屏幕[转]的更多相关文章

  1. CSS3自适配手机屏幕

    @media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./im ...

  2. JSP 适配手机屏幕

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scal ...

  3. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  4. web app变革之rem（手机屏幕实现全适配）

    以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...

  5. 了解真实的rem手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  6. Android开发——Android手机屏幕适配方案总结

    )密度无关像素,单位为dp,是Android特有的单位 Android开发时通常使用dp而不是px单位设置图片大小,因为它可以保证在不同屏幕像素密度的设备上显示相同的效果. /** * dp与px的转 ...

  7. 真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  8. android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高

    1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...

  9. Unity3d 手机屏幕自动适配

    我提到手机自动适配的一个方法中:postion和Scale,“比例”概念适配手机.原始资源是480*800 经过实际项目考验,个人感觉: 1,UICamera是自动适配分辨率,UI上也是拉伸.放大UI ...

随机推荐

  1. Entity Framework笔记（二）

    前几日学习了在VS2010Console项目中使用Entity Framework,并且使用Code First模式.通过编写Model类,来生成数据库对应的表.并且,往表中写入数据以及获取表中的所有 ...

  2. 【Java编码准则】の ＃02不要在client存储未加密的敏感信息

    当构建CS模式的应用程序时,在client側存储敏感信息(比如用户私要信息)可能导致非授权的信息泄漏. 对于Web应用程序来说,最常见的泄漏问题是在client使用cookies存放server端获取 ...

  3. 坑爹BUG，没有详细的看还真看不出问题

    Queue queue = new LinkedList<String> (); for(int i = 0; i<20; i++) { queue.add("坑爹&quo ...

  4. JBehave

    JBehave 上篇我们说到如何从Github上clone出一个JBehave项目,既是为了学习JBehava,也是为了熟悉下Github.从clone下来的项目看来,基本没什么问题,稍微捋一捋就可以 ...

  5. ORM-Dapper+DapperExtensions

    ORM-Dapper+DapperExtensions 现在成熟的ORM比比皆是,这里只介绍Dapper的使用(最起码我在使用它,已经运用到项目中,小伙伴们反馈还可以). 优点: 1.开源.轻量.小巧 ...

  6. EMVTag系列5《8E 持卡人验证方法(CVM)名单》

    L: var. up to 252 -R(需求):数据必须存在,在读应用数据过程中,终端不检查 依照优先顺序列出卡片应用支持的全部持卡人验证方法 注:一个应用中能够有多个CVM列表,比如一个用于国内交 ...

  7. JSF+EJB+JPA总体思路

    前言: JSF+EJB+JPA 其实我并没有想象中的难,只是想做好,建立在正确的地方应用,真正的困难. 良好的技术,在错误的地方做应用,这是唯一能够被垃圾. 用. 重量级企业应用能够使用这个主要的3层 ...

  8. css居中方式总结

    方法一: line-height <div class="vertical" style="width:200px;height:200px;border:2px ...

  9. mysql三学习sql声明学习

    SQL 是一门 ANSI 的标准计算机语言,用来訪问和操作数据库系统.SQL 语句用于取回和更新数据库中的数据.SQL 可与数据库程序协同工作,比方MySQL. MS Access.DB2.Infor ...

  10. 为代码减负之&lt;二&gt;存储过程（SQL）

    在上篇博客中介绍到了触发器的使用,而且当中也提到了触发器是个特殊的存储过程,那么什么是存储过程呢?他们 两个又究竟有什么差别呢? 事实上最基本的差别就是,触发器是当满足条件时系统自己主动运行的,而存储 ...