我们都知道html5中的媒体查询(media query)对于响应式网页的重要性,它为我们提供了检测屏幕设备的有效方法,所以,当我们开发页面的时候,就可以很方便的根据media query 来检查屏幕尺寸,并加载相应的css样式。
但是,从目前我们常见的桌面电脑、平板电脑再到智能手机,屏幕尺寸如此之多以至让许多web前端开发者们都十分头疼。最近发现了一个非常实用的网站responsivewebcss,它为响应式网页开发者们提供了一个专门的屏幕尺寸检测工具,进入网站后,只需选择相应的屏幕设备尺寸,该工具就会为你自动生成相应的媒体查询。
以下是总结的媒体查询代码,涉及了目前主流设备屏幕的尺寸,希望对大家有所帮助。当我们使用的时候,直接将相依的css样式放入media媒体查询内即可。
/* ipad等平板设备 (1024px) 屏幕尺寸在480px到1024px之间,且设备为横屏状态 */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
}
/* ipad或大尺寸智能手机设备 (768px) 屏幕尺寸在321px到1024px之间,且设备为竖屏状态 */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
}
/* Phone 横屏状态 (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
}
/* Phone 竖屏状态 (320px) */
@media only screen and (max-width: 320px) {
}
下面这个网址用于生成响应页面
https://www.entomic.com/responsivecss
相关推荐
微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,...
NULL 博文链接:https://axl234.iteye.com/blog/1833406
包括利用CSS3-Media Query实现响应式布局等知识点
如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至...MediaQueries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩
主要是我们将了解一下怎样通过html5和css3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式web设计方案
响应式网页使用媒体查询 响应式网页程序,使用媒体查询
网页中嵌入windows media player示例
主要介绍了详解使用CSS3的@media来编写响应式的页面,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
响应式网页响应式网页任务的解决方案。|目录概述在这里,我创建了一个示例响应页面,几乎就像社交媒体布局一样。建于HTML CSS特征此应用程序/站点是作为培训项目创建的。
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1832739
响应式布局代码,可用于网页和客户端,简单易懂。
下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media screen and (min-width:321px) and (max-width:375px){ #talkFooter .editArea{…… } } @media...
忘记了媒体查询是怎么用的了, 看了一下文档, 随手写的最基本的实现思路, 超级简陋, 不要嫌弃. 图片替换一下就能看到效果.嗯… 还是把文件也存上来吧. 记一下, 下次再忘了直接看一眼就可以了.
这是一个使用纯js和CSS3媒体查询制作的简单的响应式导航菜单效果的代码。该导航菜单类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。本代码适用...
本项目是通过rem em 百分比 media 进行原生轻量响应式网站开发,上手非常简单,也可以当做二次开发的模板,兼容处理到ie8及其以上。
具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,...
CSS3有了个更为实用的 media query。而移动终端的浏览器基本已经完全支持了css3.他可以为你获取各种终端的数据。