资讯频道 → Web前端
阅读更多

5顶
0踩

Web前端

原创新闻 一些实用的CSS Media Query代码片段

2013-04-02 22:49 by 副主编 wangguo 评论(3) 有21106人浏览
css Media Query 响应式 自适应

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

移动互联网时代，新设备层出不穷，各种屏幕大小和分辨率的出现，为Web前端设计增加了一些挑战。如何让网站或Web应用完美显示在各种不同的设备上呢？答案是采用响应式设计，让页面根据设备屏幕自动适应并调整。


CSS3的出现让响应式Web设计变得简单，CSS3提供了强大的media queries，允许你针对不同的条件设置不同的样式，可以在不修改页面内容的情况下，为不同设备提供不同的样式效果。

以下是一些CSS media queries代码片段，你可以添加在自己的项目中，让页面根据屏幕自适应：

iPhone5 

@media screen and (device-aspect-ratio: 40/71) {
}
or
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
}

Blackberry Torch 

@media screen and (max-device-width: 480px) { 
}

Samsung S3 

@media only screen and (-webkit-device-pixel-ratio: 2) {
}

Google Nexus 7 

@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
}

iPad Mini 

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}

iPad 3

横向 
@media (max-device-width: 1024px) and (orientation: landscape) { 
}

竖向 
@media (max-device-width: 768px) and (orientation: portrait) { 
}

Galaxy Tab 10.1

横向 
@media (max-device-width: 1280px) and (orientation: landscape) { 
}

竖向 
@media (max-device-width: 800px) and (orientation: portrait) { 
}

更多信息：

  • 大小: 80.9 KB
5
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 bruce.peng 2013-04-07 08:38
.......
2 楼 moses3017 2013-04-03 18:16
我去，要针对每种分辨率写一种样式。
1 楼 xyang81 2013-04-03 09:42
沙发。。。。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • jsp设计聊天室

    jsp实验--设计聊天室，在聊天室中，需要通过JSP内置对象application来实现公聊，用session实现私聊。 聊天室的设计包括：用户进行登录，选择聊天室，进行聊天，退出聊天室。 在聊天室中，用户只需输入一个用户名就...

  • web网页版的聊天室 JsP+ ajax 实现公聊和私聊

    还有私聊，群聊，离开聊天室都有提示， 另外有显示在线总人数和账号的公告栏！ 下载解压导入就能运行，无需加载其他jar包， 绝对是个值得学习的好项目， 开源从分享开始，希望大家多分享自己的代码。。。。

  • JSP课程设计-聊天室

    2．1聊天室的可行性分析 随着计算机技术的发展和网络人口的增加，网络世界也越来越广博，越来越丰富，聊天已经成为网上一种习已为常的事。 可行性研究是为了弄清楚系统开发的项目是不是可以实现和值得进行研究的过程...

  • jsp聊天室实例

    jsp聊天室实例-应用mysql数据库开发，并使用MD5加密，可以进行多人聊天和私聊

  • 基于jsp的网络聊天室系统.zip

    基于jsp的网络聊天室系统 java；jsp；mysql 本聊天室系统，是一款非常方便的聊天系统网站，网站功能强大，分为前台和后台。本系统将实现以下基本功能： 聊天室前台： (1) 注册。注册时已经注册的不能重复注册。 ...

  • 聊天室--实现群聊和私聊

    完美实现聊天室的群聊和私聊功能，值得学习

  • 简单的Ajax聊天室样例(servlet+jsp)

    一个小例子,很简单的聊天室.. servlet负责处理客户端发来的信息和返回内容,jsp负责显示.ajax在jsp中实现无刷新提交. 解压后是eclipse的工程文件夹

  • 运用jsp实现的聊天室系统

    运用jsp实现的聊天室系统包含Application形式的聊天室、XML形式的聊天室和带私聊的聊天室

  • jsp简易聊天室搭建

    利用application和session实现公聊和私聊，界面美观，有完整代码，可直接运行。

  • javaWeb（四个范围）实现聊天室功能（群聊+私聊）

    主要用servlet+jsp+Qracle实现聊天室的私聊+群聊功能，灵活运用了javaWeb的四个范围实现私聊

  • JSP实现的聊天室

    该聊天室涉及到数据库的运用，包括用户注册及登录，然后进行多人聊天。数据库为Mysql,聊天过程中会显示时间等内容。

  • jsp+application实现网络聊天室

    使用jsp+application完成网络聊天室，没有用数据库，servlet，ajax，socket。单纯使用application。可以全屏公聊以及制定人私聊。页面刷新使用js定时器，当填写发送信息时，停止刷新，发送后继续刷新。

  • AJax聊天室 Jsp课程设计 源代码（完整版）

    ... 3、在线用户：从在线用户数据集中读取或删除用户。...4、发表用户：选择聊天内容格式设置，发表聊天内容，私聊、公聊选择。 5、聊天内容：从Application里读取公聊和私聊的内容。 6、退出：退出聊天系统。

  • 实验三 实现私聊群聊聊天室

    1、设计聊天室，在聊天室中，需要通过JSP内置对象application来实时保存特定数量的当前聊天信息。 聊天室的设计包括：用户进行登录，选择聊天室，进行聊天，退出聊天室。在聊天室中，用户只需输入一个用户名就可以...

  • jsp在线聊天室源码（很详细）

    jsp在线聊天室源码 包括前台和后台管理 非常详细，欢迎大家下载 不下会后悔啊 其中包含公聊和私聊等等 后台包括对前台用户信息的管理等

  • javaWeb实现聊天室（私聊+群聊）

    写在前面 近几天，迎来了第一个小项目，不做不知道，一做吓一跳。好多知识都掌握的不够扎实，看似会了，...本次的目标是用javaWeb做一个聊天室，能实现简单的群聊+私聊以及查看在线人数、历史聊天等功能。 1、在做

  • JSP聊天室(实现)

    个人原创聊天室,刚学完SERVLET和JSP入门的作品 - 用户登录(验证登录,头像选择) - 公聊 - 私聊 - 动作/表情 - 图片发送 - 聊天范围选择 - 清空聊天记录 - 分屏聊天 - 更改用户信息 ...

  • jsp+ajax做的聊天室

    可以私聊，可以群聊，不含数据库，对进入聊天室的人可以在线监听，不可以创建房间，看清楚描述了再下，别说我坑你们，- -

  • java聊天室公聊，私聊下载

    包括有公聊，私聊，连接服务器等等功能！没有连接数据库，往后可以添加连接数据库的功能!

  • 基于springboot大学生就业信息管理系统源码数据库文档.zip

    基于springboot大学生就业信息管理系统源码数据库文档.zip

Global site tag (gtag.js) - Google Analytics