media-query

/* Desktops and laptops ----------- */
@media only screen and (min-width:1224px) { 

}

/* Large screens ----------- */
@media only screen and (min-width:1824px) { 

}

/* old Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width:320px) and (max-device-width:480px) {

/*	html { font-size: 35%; }
	#recordName { width: 60px; }*/ }

/* old Smartphones (landscape) ----------- */
@media only screen and (min-width:321px) { 

}

/* old Smartphones (portrait) ----------- */
@media only screen and (max-width:320px) {

/*	html { font-size: 35%; }
	#recordName { width: 60px; }*/ }

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

  /*html { font-size: 40%; }
  #recordName { width: 60px; }
  #recordNumber { width: 100px; }*/}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) { 

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) { 

}

/* Android Tablet (portrait and landscape) ----------- */
@media only screen and (min-device-width:800px) and (max-device-width:1280px) {

  /* Styles */}

/* Android Tablet (landscape) ----------- */
@media only screen and (min-device-width:800px) and (max-device-width:1280px) and (orientation:landscape) {

  /* Styles */ }

/* Android Tablet (portrait) ----------- */
@media only screen and (min-device-width:800px) and (max-device-width:1280px) and (orientation:portrait) {

  /* Styles */ }

/* Desire + Galaxy S2 (portrait and landscape) ----------- */
@media only screen and (min-device-width:480px) and (max-device-width:800px) {

  /* Styles */ }

/* Desire + Galaxy S2 (landscape) ----------- */
@media only screen and (min-device-width:480px) and (max-device-width:800px) and (orientation:landscape) {

  /* Styles */ }

/* Desire + Galaxy S2 (portrait) ----------- */
@media only screen and (min-device-width:480px) and (max-device-width:800px) and (orientation:portrait) {

  /* Styles */ }
时间: 2024-10-27 12:11:53

media-query的相关文章

201509280825_《css3——media query整理2》

1.Smartphones (竖板和横板) @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* 你的样式写在这里 */ } 2.Smartphones (横板) @media only screen and (min-width : 321px) { /* 你的样式写在这里 */ } 3.Smartphones (竖板) @media only screen and (max-

响应式布局(二)—— CSS3 Media Query

响应式布局有三种实现方式: CSS3 Media Query 原生 JS 代码 第三方开源框架(最常见的有 bootstrap) CSS3 -- Media Query 1. 媒体查询实现方式 方式一:styleSheet样式表中的写法: 如:<style>标签中使用@media <style> @media screen and (min-width: 480px) { body{background: blue;} } </style> 方式二:<link&g

媒体查询@media query

@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:1200px)大屏 (默认超小屏 小于768px) @media (max-width:1199px) 大屏(<=) @media (max-width:991px)中屏 @media (max-width:767px)小屏 box-sizing:border-box 可以设置带边框的盒子模型,设置的div

使用CSS3 Media Query技术适配Android平板屏幕分辨率和屏幕密度

使用HTML5开发移动应用时需要适配各种Android平板设备的分辨率和屏幕密度,过程实在很麻烦,最后的解决办法是使用css media query,同时匹配分辨率和屏幕密度,在每个设备上进行兼容性测试,最终保证在多数Android平板上都能较好的显示. 一个典型的针对设备的Css Media Query写法如下,可以保证页面高度充满屏幕,简单的设置height:100%是不行的. //SAMSUNG N5100, Nexus7 1, @media only screen and (min-de

IE8以下不支持css3 media query的解决办法

针对IE8以下不支持css3的media query,可以使用response.js解决 下载地址:https://github.com/scottjehl/Respond/ 这里有一篇关于其实现原理的文章:http://caibaojian.com/respondjs.html 引用时的注意点: 不可将媒介查询代码写在html内部,因为response是通过ajax分析link引入的css文件,故html里面的样式将被忽略. 引入文件需在css引入之后 <!--[if lte IE 8]>

CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案 范例效果预览 首先,我们来看看本篇范

media query(媒体查询)和media type(媒体类型)

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一.随着移动互联网的发展,media query开始得到大家的重视. media type 让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通

viewport和media query

viewport: 你可以定义viewport的宽度.如果你不使用width=device-width,在移动端上你的页面延伸会超过视窗布局的宽度(width=980px),如果你使用了width=device-width,你的页面将会显示为合适的移动端宽度(width=320px),我们可以使用meta标记: <meta name="viewport" content="width=device-width"> viewport - target-de

iPhone CSS media query(媒体查询)

iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {} iPhone 5: @media screen and (device-aspect-ratio: 40/71) {} iPhone 6: @media screen and (device-aspect-ratio: 667/375) {} iPhone 6Pl

响应式布局之CSS3 media query

media query即媒体查询,是响应式布局不可获缺的一部分. CSS3中的media query增加了更多的媒体查询,这样在CSS3中我们可以在不改变页面表达内容的情况下,添加各种表达式来设置不同类型的媒体条件,来调整页面布局来适应各种不同设备. media query有两种设置方式: 1.直接在link中判断设备尺寸,引用不同的css来渲染当前页面. <link rel='stylesheet' media ='screen and (max-width:640px)' href = 's