自动检测移动设备浏览器并自适应宽度代码,Css代码库,德仔网

代码语言

代码分类

【Css】自动检测移动设备浏览器并自适应宽度

作者:Robin / 发布于2014/11/5/ 744


	/* Desktops and laptops ----------- */
	 @media only screen
	 and (min-width : 1224px) {
	 /* Styles */
	 }
	
	 /* Large screens ----------- */
	 @media only screen
	 and (min-width : 1824px) {
	 /* Styles */
	 }
	
	 /* old Smartphones (portrait and landscape) ----------- */
	 @media only screen
	 and (min-device-width : 320px)
	 and (max-device-width : 480px) {
	 /* Styles */
	 }
	
	 /* old Smartphones (landscape) ----------- */
	 @media only screen
	 and (min-width : 321px) {
	 /* Styles */
	 }
	
	 /* old Smartphones (portrait) ----------- */
	 @media only screen
	 and (max-width : 320px) {
	 /* Styles */
	 }
	
	 /* iPhone 4 ----------- */
	 @media
	 only screen and (-webkit-min-device-pixel-ratio : 1.5),
	 only screen and (min-device-pixel-ratio : 1.5) {
	 /* Styles */
	 }
	
	 /* iPads (portrait and landscape) ----------- */
	 @media only screen
	 and (min-device-width : 768px)
	 and (max-device-width : 1024px) {
	 /* Styles */
	 }
	
	 /* iPads (landscape) ----------- */
	 @media only screen
	 and (min-device-width : 768px)
	 and (max-device-width : 1024px)
	 and (orientation : landscape) {
	 /* Styles */
	 }
	
	 /* iPads (portrait) ----------- */
	 @media only screen
	 and (min-device-width : 768px)
	 and (max-device-width : 1024px)
	 and (orientation : portrait) {
	 /* Styles */
	 }
	
	 /* 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 */
	 }

试试其它关键字

　自适应宽度　

同语言下

可能有用的

Robin贡献的其它代码(16)