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

5顶
0踩

Web前端

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

2013-04-02 22:49 by 副主编 wangguo 评论(3) 有21139人浏览
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聊天室公聊，私聊下载

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

  • 智慧园区3D可视化解决方案PPT(24页).pptx

    在智慧园区建设的浪潮中，一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点，通过信息化平台与智能硬件的深度融合，为园区带来前所未有的变革。 首先，智慧园区综合解决方案以提升园区整体智能化水平为核心，打破了信息孤岛现象。通过构建统一的智能运营中心（IOC），采用1+N模式，即一个智能运营中心集成多个应用系统，实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”，利用大数据可视化技术，将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上，管理者可直观掌握园区运行状态，实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒，还大幅提升了管理效率，让园区管理更加精细化、智能化。 更令人兴奋的是，该方案融入了诸多前沿科技，让智慧园区充满了未来感。例如，利用AI视频分析技术，智慧园区实现了对人脸、车辆、行为的智能识别与追踪，不仅极大提升了安防水平，还能为园区提供精准的人流分析、车辆管理等增值服务。同时，无人机巡查、巡逻机器人等智能设备的加入，让园区安全无死角，管理更轻松。特别是巡逻机器人，不仅能进行360度地面全天候巡检，还能自主绕障、充电，甚至具备火灾预警、空气质量检测等环境感知能力，成为了园区管理的得力助手。此外，通过构建高精度数字孪生系统，将园区现实场景与数字世界完美融合，管理者可借助VR/AR技术进行远程巡检、设备维护等操作，仿佛置身于一个虚拟与现实交织的智慧世界。 最值得关注的是，智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程，实现降本增效。例如，智能库存管理、及时响应采购需求等举措，大幅减少了库存积压与浪费；而设备自动化与远程监控则降低了维修与人力成本。同时，借助大数据分析技术，园区可精准把握产业趋势，优化招商策略，提高入驻企业满意度与营收水平。此外，智慧园区的低碳节能设计，通过能源分析与精细化管理，实现了能耗的显著降低，为园区可持续发展奠定了坚实基础。总之，这一综合解决方案不仅让园区管理变得更加智慧、高效，更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境，是未来园区建设的必然趋势。

Global site tag (gtag.js) - Google Analytics