{"id":520,"date":"2014-07-08T07:08:41","date_gmt":"2014-07-07T23:08:41","guid":{"rendered":"http:\/\/www.shuran.cn\/?p=520"},"modified":"2014-07-08T07:08:41","modified_gmt":"2014-07-07T23:08:41","slug":"css3-media-queries-%e7%89%87%e6%ae%b5","status":"publish","type":"post","link":"https:\/\/www.shuran.cn\/?p=520","title":{"rendered":"CSS3 Media Queries \u7247\u6bb5"},"content":{"rendered":"

\n\t\n<\/p>\n

\n\t\n<\/p>\n

\n\tResponsive\u8bbe\u8ba1\u5728\u73b0\u4ee3Web\u8bbe\u8ba1\u4e2d\u53ef\u8c13\u662f\u8d8a\u6765\u8d8a\u6d41\u884c\uff0c\u4f46\u5f88\u540c\u5b66\u4eec\u5e76\u672a\u7406\u89e3\u5176\u771f\u6b63\u7684\u8bbe\u8ba1\u6982\u5ff5\uff0c\u5f80\u5f80\u628aResponsive\u89c6\u4e3a\u4e00\u79cd\u81ea\u9002\u5e94\u5e03\u5c40\u3002\u5f53\u7136\u6709\u5f88\u591a\u540c\u5b66\u4e5f\u5728\u5c1d\u8bd5\u52a8\u5199Responsive\u7684\u6848\u4f8b\uff0c\u4f46\u5982\u4f55\u53d6\u5176\u65ad\u70b9\u5de6\u53f3\u7ea0\u7ed3\uff0c\u5982\u4f55\u8bbe\u7f6e\u54ea\u51e0\u4e2a\u65ad\u70b9\uff1f\u53c8\u4ece\u4f55\u5165\u624b\uff1f\n<\/p>\n

\n\tResponsive\u4e2d\u7684\u65ad\u70b9\u90fd\u4f9d\u8d56\u4e8eCSS3\u7684Media Queries\u6765\u51b3\u65ad\u3002\u66fe\u5728CSS3 Media Queries\u6a21\u677f\u3001\u4f7f\u7528em\u5355\u4f4d\u521b\u5efaCSS3\u7684Media Queries\u548ciPads\u548ciPones\u7684Media Queries\u6709\u8fc7\u8fd9\u65b9\u9762\u7684\u4ecb\u7ecd\u3002\u4eca\u5929\u7279\u610f\u6839\u636e\u4e00\u4e9bResponsive\u6846\u67b6\u6574\u7406\u4e86\u4e00\u4e9b\u5e38\u89c1\u7684Media Queries\u7247\u6bb5\uff0c\u4ee5\u4f9b\u5927\u5bb6\u53c2\u8003\uff1a\n<\/p>\n

\n\t\n<\/p>\n

\n\tCSS3 Media Queries\u7247\u6bb5
\n<\/h2>\n

\n\t\u5728\u8fd9\u91cc\u4e3b\u8981\u5206\u6210\u4e09\u7c7b\uff1a\u79fb\u52a8\u7aef\u3001PC\u7aef\u4ee5\u53ca\u4e00\u4e9b\u5e38\u89c1\u7684\u54cd\u5e94\u5f0f\u6846\u67b6\u7684Media Queries\u7247\u6bb5\u3002\n<\/p>\n

\n\t\u79fb\u52a8\u7aefMedia Queries\u7247\u6bb5
\n<\/h3>\n

\n\tiPhone5
\n<\/h4>\n
@media<\/span> screen and<\/span> (device-aspect-ratio:<\/span> 40<\/span>\/71<\/span>) {}\r\n\u6216\u8005\uff1a @media<\/span> screen and<\/span> (device-width:<\/span> 320<\/span>px) and<\/span> (device-height:<\/span> 568<\/span>px) and<\/span> (-webkit-device-pixel-ratio:<\/span> 2<\/span>){}\t\r\n<\/pre>\n
\n\tiPhone 5 In Portrait & Landscape
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 320<\/span>px) and<\/span> (max-device-width :<\/span> 568<\/span>px){ \/\/<\/span> CSS<\/span> Style<\/span> }\t\r\n<\/pre>\n
\n\tiPhone 5 In Landscape
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 320<\/span>px) and<\/span> (max-device-width :<\/span> 568<\/span>px) and<\/span> (orientation :<\/span> landscape){ \/\/<\/span> CSS<\/span> Style<\/span> }\t\r\n<\/pre>\n
\n\tiPhone 5 In Portrait
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 320<\/span>px) and<\/span> (max-device-width :<\/span> 568<\/span>px) and<\/span> (orientation :<\/span> portrait){ \/\/<\/span> CSS<\/span> Style<\/span> }\t\r\n<\/pre>\n
\n\tiPone4
\n<\/h4>\n
@media<\/span> only screen and<\/span> (-webkit-min-device-pixel-ratio :<\/span> 1.5<\/span>), only screen and<\/span> (min-device-pixel-ratio :<\/span> 1.5<\/span>) {}\t\r\n<\/pre>\n
\n\tiPhone 3G
\n<\/h4>\n
@media<\/span> screen and<\/span> (device-width:<\/span> 320<\/span>px) and<\/span> (device-height:<\/span> 480<\/span>px) and<\/span> (-webkit-device-pixel-ratio:<\/span> 1<\/span>){}\t\r\n<\/pre>\n
\n\tiPhone
\n<\/h4>\n
\/*Landscape<\/span>*\/<\/span> @media<\/span> screen and<\/span> (max-device-width: 480<\/span>px) {}\r\n\r\n\/*Portrait<\/span>*\/<\/span> @media<\/span> screen and<\/span> (max-device-width: 320<\/span>px) {}\t\r\n<\/pre>\n
\n\tBlackberry Torch
\n<\/h4>\n
@media<\/span> screen and<\/span> (max-device-width:<\/span> 480<\/span>px) {}\t\r\n<\/pre>\n
\n\tSamsung S3
\n<\/h4>\n
@media<\/span> only screen and<\/span> (-webkit-device-pixel-ratio:<\/span> 2<\/span>) {}\t\r\n<\/pre>\n
\n\tGoogle Nexus 7
\n<\/h4>\n
@media<\/span> screen and<\/span> (device-width:<\/span> 600<\/span>px) and<\/span> (device-height:<\/span> 905<\/span>px) and<\/span> (-webkit-min-device-pixel-ratio:<\/span> 1.331<\/span>) and<\/span> (-webkit-max-device-pixel-ratio:<\/span> 1.332<\/span>) {}\t\r\n<\/pre>\n
\n\tSamsung Galaxy S3
\n<\/h4>\n
@media<\/span> only screen and<\/span> (-webkit-device-pixel-ratio:<\/span> 2<\/span>) {}\t\r\n<\/pre>\n
\n\tSamsung Galaxy S2
\n<\/h4>\n
@media<\/span> screen and<\/span> (device-width:<\/span> 320<\/span>px) and<\/span> (device-height:<\/span> 533<\/span>px) and<\/span> (-webkit-device-pixel-ratio:<\/span> 1.5<\/span>) {}\t\r\n<\/pre>\n
\n\tGalaxy Tab 10.1
\n<\/h4>\n
\/*Landscape<\/span>*\/<\/span> @media<\/span> (max-device-width: 1280<\/span>px) and<\/span> (orientation: landscape) {}\r\n\r\n\/*Portrait<\/span>*\/<\/span> @media<\/span> (max-device-width: 800<\/span>px) and<\/span> (orientation: portrait) {}\t\r\n<\/pre>\n
\n\tiPad In Portrait & Landscape
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px){ \/\/<\/span> CSS<\/span> Styles<\/span> }\t\r\n<\/pre>\n
\n\tiPad In Landscape
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px) and<\/span> (orientation :<\/span> landscape){ \/\/<\/span> CSS<\/span> Styles<\/span> }\t\r\n<\/pre>\n
\n\tiPad In Portrait
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px) and<\/span> (orientation :<\/span> portrait){ \/\/<\/span> CSS<\/span> Styles<\/span> }\t\r\n<\/pre>\n
\n\tRetina iPad In Portrait & Landscape
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px) and<\/span> (-webkit-min-device-pixel-ratio:<\/span> 2<\/span>){ \/\/<\/span> CSS<\/span> Styles<\/span> }\t\r\n<\/pre>\n
\n\tRetina iPad in landscape
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px) and<\/span> (orientation :<\/span> landscape) and<\/span> (-webkit-min-device-pixel-ratio:<\/span> 2<\/span>){ \/\/<\/span> CSS<\/span> Styles<\/span> }\t\r\n<\/pre>\n
\n\tRetina iPad in portrait
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px) and<\/span> (orientation :<\/span> portrait) and<\/span> (-webkit-min-device-pixel-ratio:<\/span> 2<\/span>){ \/\/<\/span> CSS<\/span> Styles<\/span> }\t\r\n<\/pre>\n
\n\tiPad Mini In Portrait & Landscape
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px) and<\/span> (-webkit-min-device-pixel-ratio:<\/span> 1<\/span>){ \/\/<\/span> CSS<\/span> Style<\/span> }\t\r\n<\/pre>\n
\n\tiPad Mini In Landscape
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px) and<\/span> (orientation :<\/span> landscape) and<\/span> (-webkit-min-device-pixel-ratio:<\/span> 1<\/span>){ \/\/<\/span> CSS<\/span> Style<\/span> }\t\r\n<\/pre>\n
\n\tiPad Mini In Portrait
\n<\/h4>\n
@media<\/span> only screen and<\/span> (min-device-width :<\/span> 768<\/span>px) and<\/span> (max-device-width :<\/span> 1024<\/span>px) and<\/span> (orientation :<\/span> portrait) and<\/span> (-webkit-min-device-pixel-ratio:<\/span> 1<\/span>) { \/\/<\/span> CSS<\/span> Style<\/span> }\t\r\n<\/pre>\n
\n\t\u684c\u9762\u7aef
\n<\/h3>\n
\n\t320px
\n<\/h4>\n
@media<\/span> screen and<\/span> (max-width:<\/span> 320<\/span>px) {}\t\r\n<\/pre>\n
\n\t640px
\n<\/h4>\n
@media<\/span> screen and<\/span> (max-width:<\/span> 640<\/span>px) {}\t\r\n<\/pre>\n
\n\t800px
\n<\/h4>\n
@media<\/span> screen and<\/span> (max-width:<\/span> 800<\/span>px) {}\t\r\n<\/pre>\n
\n\t1024px
\n<\/h4>\n
@media<\/span> screen and<\/span> (max-width:<\/span> 1024<\/span>px) {}\t\r\n<\/pre>\n
\n\t1028px
\n<\/h4>\n
@media<\/span> screen and<\/span> (max-width:<\/span> 1028<\/span>px) {}\t\r\n<\/pre>\n
\n\t\u9664\u4e86\u4e0a\u9762\u7684\u5e38\u89c1Media Queries\u7247\u6bb5\u4e4b\u5916\uff0c\u4e0b\u9762\u7684\u7f51\u7ad9\u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e9b\u5176\u4ed6\u7684\u7247\u6bb5\uff1a\n<\/p>\n
\n\t\"BEM\"<\/a>\n<\/p>\n
\n\t\u6846\u67b6Media Queries\u7247\u6bb5
\n<\/h3>\n
\n\tBoilerplate
\n<\/h4>\n
\/*URL<\/span>:http:\/\/html<\/span>5boilerplate.com\/*\/<\/span> \/* Smartphones (portrait and<\/span> landscape) ----------- *\/<\/span> @media<\/span> only screen and<\/span> (min-width : 320<\/span>px) and<\/span> (max-width : 480<\/span>px) { \/* Styles *\/<\/span> }\r\n\/* Smartphones (landscape) ----------- *\/<\/span> @media<\/span> only screen and<\/span> (min-width : 321<\/span>px) { \/* Styles *\/<\/span> }\r\n\/* Smartphones (portrait) ----------- *\/<\/span> @media<\/span> only screen and<\/span> (max-width : 320<\/span>px) { \/* Styles *\/<\/span> }\r\n\/* iPads (portrait and<\/span> landscape) ----------- *\/<\/span> @media<\/span> only screen and<\/span> (min-width : 768<\/span>px) and<\/span> (max-width : 1024<\/span>px) { \/* Styles *\/<\/span> }\r\n\/* iPads (landscape) ----------- *\/<\/span> @media<\/span> only screen and<\/span> (min-width : 768<\/span>px) and<\/span> (max-width : 1024<\/span>px) and<\/span> (orientation : landscape) { \/* Styles *\/<\/span> }\r\n\/* iPads (portrait) ----------- *\/<\/span> @media<\/span> only screen and<\/span> (min-width : 768<\/span>px) and<\/span> (max-width : 1024<\/span>px) and<\/span> (orientation : portrait) { \/* Styles *\/<\/span> }\r\n\/* Desktops and<\/span> laptops ----------- *\/<\/span> @media<\/span> only screen and<\/span> (min-width : 1224<\/span>px) { \/* Styles *\/<\/span> }\r\n\/* Large screens ----------- *\/<\/span> @media<\/span> only screen and<\/span> (min-width : 1824<\/span>px) { \/* Styles *\/<\/span> }\r\n\/* iPhone 4<\/span> ----------- *\/<\/span> @media<\/span> only screen and<\/span> (-webkit-min-device-pixel-ratio : 1.5<\/span>),\r\nonly screen and<\/span> (min-device-pixel-ratio : 1.5<\/span>) { \/* Styles *\/<\/span> }\t\r\n<\/pre>\n
\n\tBootstrap\u7684Media Queries
\n<\/h4>\n
\/*URL:http:\/\/twitter.github.com\/bootstrap*\/<\/span> \/* Large desktop *\/<\/span> @media<\/span> (min-width: 1200<\/span>px) <\/span>{ ... } \/* Portrait tablet to landscape and desktop *\/<\/span> @media<\/span> (min-width: 768<\/span>px) and (max-width: 979<\/span>px) <\/span>{ ... } \/* Landscape phone to portrait tablet *\/<\/span> @media<\/span> (max-width: 767<\/span>px) <\/span>{ ... } \/* Landscape phones and down *\/<\/span> @media<\/span> (max-width: 480<\/span>px) <\/span>{ ... }\t\r\n<\/pre>\n
\n\tFoundation\u7684Media Queries
\n<\/h4>\n
\/*URL<\/span>:http:\/\/foundation<\/span>.zurb.com\/*\/<\/span> \/* We use<\/span> this media query to add styles to any device that supports media queries *\/<\/span> @media<\/span> only screen { }\r\n\r\n\/* Used to alter styles for<\/span> screens at least 768<\/span>px wide. This is where the grid changes. *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 768<\/span>px) {}\r\n\r\n\/* Used to alter styles for<\/span> screens at least 1280<\/span>px wide. *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 1280<\/span>px) {}\r\n\r\n\/* Used to alter styles for<\/span> screens at least 1440<\/span>px wide. *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 1440<\/span>px) {}\r\n\r\n\/* Apply styles to screens in landscape orientation *\/<\/span> @media<\/span> only screen and<\/span> (orientation: landscape) {}\r\n\r\n\/* Apply styles to screens in portrait orientation *\/<\/span> @media<\/span> only screen and<\/span> (orientation: portrait) {}\t\r\n<\/pre>\n
\n\tSkeleton\u7684Media Queries
\n<\/h4>\n
\/*URL<\/span>:http:\/\/www<\/span>.getskeleton.com*\/<\/span> \/* Smaller than standard 960<\/span> (devices and<\/span> browsers) *\/<\/span> @media<\/span> only screen and<\/span> (max-width: 959<\/span>px) {}\r\n\r\n\/* Tablet Portrait size to standard 960<\/span> (devices and<\/span> browsers) *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 768<\/span>px) and<\/span> (max-width: 959<\/span>px) {}\r\n\r\n\/* All Mobile Sizes (devices and<\/span> browser) *\/<\/span> @media<\/span> only screen and<\/span> (max-width: 767<\/span>px) {}\r\n\r\n\/* Mobile Landscape Size to Tablet Portrait (devices and<\/span> browsers) *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 480<\/span>px) and<\/span> (max-width: 767<\/span>px) {}\r\n\r\n\/* Mobile Portrait Size to Mobile Landscape Size (devices and<\/span> browsers) *\/<\/span> @media<\/span> only screen and<\/span> (max-width: 479<\/span>px) {}\t\r\n<\/pre>\n
\n\tFRAMELESS\u7684Media Queries
\n<\/h4>\n
\/*URL<\/span>:http:\/\/framelessgrid<\/span>.com\/*\/<\/span> @media<\/span> screen and<\/span> (max-width: 16.875<\/span>em){} @media<\/span> screen and<\/span> (min-width: 32.5<\/span>em) and<\/span> (max-width: 37.4375<\/span>em),\t\r\nscreen and<\/span> (min-width: 45<\/span>em) and<\/span> (max-width: 56.9375<\/span>em),\t\r\nscreen and<\/span> (min-width: 77.5<\/span>em) and<\/span> (max-width: 102.4375<\/span>em),\t\r\nscreen and<\/span> (min-width: 135<\/span>em){} @media<\/span> screen and<\/span> (min-width: 102.5<\/span>em) and<\/span> (max-width: 117.9375<\/span>em),\t\r\nscreen and<\/span> (min-width: 150<\/span>em){} @media<\/span> screen and<\/span> (min-width: 15<\/span>em){} @media<\/span> screen and<\/span> (min-width: 30<\/span>em){} @media<\/span> screen and<\/span> (min-width: 37.5<\/span>em){} @media<\/span> screen and<\/span> (min-width: 57<\/span>em){} @media<\/span> screen and<\/span> (min-width: 57<\/span>em) and<\/span> (max-width: 117.9375<\/span>em){} @media<\/span> screen and<\/span> (min-width: 118<\/span>em){}\t\r\n<\/pre>\n
\n\tSusy\u7684Media Queries
\n<\/h4>\n
\/*URL:http:\/\/susy.oddbird.net\/*\/<\/span> @media<\/span> (min-width: 29<\/span>em) <\/span>{} @media<\/span> (min-width: 30<\/span>em) and (max-width: 60<\/span>em) <\/span>{} @media<\/span> (min-width: 119<\/span>em) <\/span>{} @media<\/span> (min-width: 33.75<\/span>em) and (max-width: 67.5<\/span>em) <\/span>{} @media<\/span> (min-width: 33.75<\/span>em) and (max-width: 67.5<\/span>em) <\/span>{}\t\r\n<\/pre>\n
\n\tLess Framework 4
\n<\/h4>\n
\/*URL<\/span>:http:\/\/lessframework<\/span>.com\/*\/<\/span> @media<\/span> only screen and<\/span> (min-width: 768<\/span>px) and<\/span> (max-width: 991<\/span>px) {}\r\n\r\n\/*\t\tMobile Layout: 320<\/span>px (20<\/span>em). *\/<\/span> @media<\/span> only screen and<\/span> (max-width: 767<\/span>px) {}\r\n\r\n\/*Wide<\/span> Mobile Layout: 480<\/span>px (30<\/span>em)*\/<\/span> @media<\/span> only screen and<\/span> (min-width: 480<\/span>px) and<\/span> (max-width: 767<\/span>px) {}\t\r\n<\/pre>\n
\n\tGolden Grid System\u7684Media Queries
\n<\/h4>\n
\/*URL<\/span>:http:\/\/goldengridsystem<\/span>.com\/*\/<\/span> \/* @media<\/span> screen and<\/span> (min-width: 640<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 40<\/span>em) {}\r\n\r\n\/* @media<\/span> screen and<\/span> (min-width: 720<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 45<\/span>em) {}\r\n\r\n\/* @media<\/span> screen and<\/span> (min-width: 888<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 55.5<\/span>em) {}\r\n\r\n\/* @media<\/span> screen and<\/span> (min-width: 984<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 61.5<\/span>em) {}\r\n\r\n\/* @media<\/span> screen and<\/span> (min-width: 1200<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 75<\/span>em) {}\r\n\r\n\/* @media<\/span> screen and<\/span> (min-width: 1392<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 87<\/span>em) {}\r\n\r\n\/* @media<\/span> screen and<\/span> (min-width: 1680<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 105<\/span>em) {}\r\n\r\n\/* @media<\/span> screen and<\/span> (min-width: 1872<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 117<\/span>em) {}\r\n\r\n\/* @media<\/span> screen and<\/span> (min-width: 2080<\/span>px) *\/<\/span> @media<\/span> screen and<\/span> (min-width: 130<\/span>em) {}\t\r\n<\/pre>\n
\n\tFluid baseline\u7684Media Queries
\n<\/h4>\n
\/*URL<\/span>:http:\/\/fluidbaselinegrid<\/span>.com\/*\/<\/span> \/* MOBILE PORTRAIT *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 320<\/span>px) {}\r\n\r\n\/* MOBILE LANDSCAPE *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 480<\/span>px) {}\r\n\r\n\/* SMALL TABLET *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 600<\/span>px) {}\r\n\r\n\/* TABLET\/NETBOOK *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 768<\/span>px) {}\r\n\r\n\/* LANDSCAPE TABLET\/NETBOOK\/LAPTOP *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 1024<\/span>px) {} @media<\/span> only screen and<\/span> (min-width: 1280<\/span>px) {}\r\n\r\n\/* WIDESCREEN *\/<\/span> \/* Increased body size for<\/span> legibility *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 1400<\/span>px) {}\t\r\n<\/pre>\n
\n\t320andUP
\n<\/h4>\n
\/*URL:http:\/\/stuffandnonsense.co.uk\/projects\/320andup*\/<\/span> @media<\/span> only screen and (min-width: 480<\/span>px) <\/span>{ \/* 480 *\/<\/span> } @media<\/span> only screen and (min-width: 600<\/span>px) <\/span>{ \/* 600 *\/<\/span> } @media<\/span> only screen and (min-width: 768<\/span>px) <\/span>{ \/* 768*\/<\/span> } @media<\/span> only screen and (min-width: 992<\/span>px) <\/span>{ \/* 992*\/<\/span> } @media<\/span> only screen and (min-width: 1382<\/span>px) <\/span>{ \/* 1382 *\/<\/span> } @media<\/span> only screen and (-webkit-min-device-pixel-ratio: 1.5<\/span>), \r\nonly screen and (min--moz-device-pixel-ratio: 1.5<\/span>), \r\nonly screen and (min-device-pixel-ratio: 1.5<\/span>) <\/span>{ \/* 2x*\/<\/span> }\t\r\n<\/pre>\n
\n\tGridless
\n<\/h4>\n
\/* URL:http:\/\/thatcoolguy.github.com\/gridless-boilerplate\/ *\/<\/span> @media<\/span> only screen and (min-width: 480<\/span>px) <\/span>{ \/* Wide mobile (480px+) styles go here *\/<\/span> } @media<\/span> only screen and (min-width: 768<\/span>px) <\/span>{ \/* Tablets\/netbooks (768px+) styles go here *\/<\/span> } @media<\/span> only screen and (min-width: 1024<\/span>px) <\/span>{ \/* Desktops (1024px+) styles go here *\/<\/span> }\t\r\n<\/pre>\n
\n\tTotanTHEMES
\n<\/h4>\n
\/*URL<\/span>:http:\/\/titanthemes<\/span>.com\/*\/<\/span> \/* Smaller than standard 960<\/span> (devices and<\/span> browsers) *\/<\/span> @media<\/span> only screen and<\/span> (max-width: 959<\/span>px) {}\r\n\r\n\/* Tablet Portrait size to standard 960<\/span> (devices and<\/span> browsers) *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 768<\/span>px) and<\/span> (max-width: 989<\/span>px) {}\r\n\r\n\/* All Mobile Sizes (devices and<\/span> browser) *\/<\/span> @media<\/span> only screen and<\/span> (max-width: 767<\/span>px) {}\r\n\r\n\/* Mobile Landscape Size to Tablet Portrait (devices and<\/span> browsers) *\/<\/span> @media<\/span> only screen and<\/span> (min-width: 480<\/span>px) and<\/span> (max-width: 767<\/span>px) {}\r\n\r\n\/* Mobile Portrait Size to Mobile Landscape Size (devices and<\/span> browsers) *\/<\/span> @media<\/span> only screen and<\/span> (max-width: 479<\/span>px) {}\t\r\n<\/pre>\n
\n\tResponsive Grid System
\n<\/h4>\n
\/*URL:http:\/\/responsive.gs\/*\/<\/span> @media<\/span> (max-width: 480<\/span>px) <\/span>{} @media<\/span> (min-width: 480<\/span>px) and (max-width: 768<\/span>px) <\/span>{} @media<\/span> (min-width: 768<\/span>px) <\/span>{} @media<\/span> (min-width: 1024<\/span>px) <\/span>{} @media<\/span> (min-width: 1200<\/span>px) <\/span>{}\t\r\n<\/pre>\n
\n\t\u672c\u6587\u641c\u96c6\u7684\u662fMedia Queries\u5728\u5404\u79cd\u8bbe\u5907\u4e0b\u7684\u4ee3\u7801\u7247\u6bb5\uff0c\u5e0c\u671b\u8fd9\u4e9b\u7247\u6bb5\u80fd\u5e2e\u5927\u5bb6\u66f4\u597d\u7684\u7406\u89e3Responsive\u65ad\u70b9\u7684\u8bbe\u7f6e\u3002\u5982\u679c\u5927\u5bb6\u6709\u66f4\u597d\u7684\u65b9\u6848\uff0c\u5e0c\u671b\u80fd\u5728\u8bc4\u8bba\u4e2d\u5206\u4eab\u3002\n<\/p>\n
\n\t2014\u5e7404\u670819\u65e5\u66f4\u65b0
\n<\/h2>\n
\n\t\u57fa\u4e8e\u89c6\u7a97\u5bbd\u5ea6\u7684\u5a92\u4f53\u67e5\u8be2\u65ad\u70b9\u8bbe\u7f6e
\n<\/h2>\n
\n\t\u524d\u63d0\u8bbe\u7f6ebody\u7684\u5b57\u4f53\u4e3a100%\u3002\u5176\u5177\u6709\u4e00\u4e2a\u7b80\u5355\u7684\u8ba1\u7b97\u516c\u5f0f\uff1a100% = 16px = 1em = 14pt\n<\/p>\n
\/*Viewport<\/span> = 1920<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 120<\/span>em){\r\n\r\n}\r\n\/*Viewport<\/span> = 1680<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 105<\/span>em){\r\n\r\n}\r\n\/*Viewport<\/span> = 1400<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 87.5<\/span>em){\r\n\r\n}\r\n\/*Viewport<\/span> = 1200<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 75<\/span>em){\r\n\r\n}\r\n\/*Viewport<\/span> = 1024<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 64<\/span>em){\r\n\r\n}\r\n\/*Viewport<\/span> = 960<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 60<\/span>em){\r\n\r\n}\r\n\/*Viewport<\/span> = 800<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width : 50<\/span>em){\r\n\r\n}\r\n\r\n\/*Viewport<\/span> = 768<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width : 48<\/span>em){\r\n\r\n}\r\n\r\n\/*Viewport<\/span> = 600<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 37.5<\/span>em){\r\n\r\n}\r\n\r\n\/*Viewport<\/span> = 480<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 30<\/span>em){\r\n}\r\n\r\n\/*Viewport<\/span> = 320<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 20<\/span>em){\r\n\r\n}\r\n\r\n\/*Viewport<\/span> = 240<\/span>px*\/<\/span> @media<\/span> screen and<\/span> (max-width: 15<\/span>em){\r\n\r\n}\r\n\r\n\r\n\/*\r\n\tHigh Resolution\/Retina Display Media Queries *\/<\/span> \/*Pixel<\/span> Density 3<\/span>*\/<\/span> @media<\/span>(-webkit-min-device-pixel-ratio: 3<\/span>),(min-resolution: 192<\/span>dpi){\r\n\r\n}\r\n\/*Pixel<\/span> Density 2<\/span>*\/<\/span> @media<\/span>(-webkit-min-device-pixel-ratio: 2<\/span>),(min-resolution: 192<\/span>dpi){\r\n\r\n}\r\n\/*Pixel<\/span> Density 1.5<\/span>*\/<\/span> @media<\/span>(-webkit-min-device-pixel-ratio: 1.5<\/span>),(min-resolution: 124.8<\/span>dpi){\r\n\r\n}\r\n\/*Pixel<\/span> Density 1.25<\/span>*\/<\/span> @media<\/span>(-webkit-min-device-pixel-ratio: 1.25<\/span>),(min-resolution: 120<\/span>dpi){\r\n\r\n}\r\n\r\n\r\n\/*\r\n\tPrinted Style Media Queries *\/<\/span> \/*Print<\/span> Resolution 300<\/span> dpi*\/<\/span> @media<\/span> print<\/span> and<\/span> (min-resolution: 300<\/span>dpi){\r\n\r\n}\r\n\r\n\/*Print<\/span> Resolution 144<\/span> dpi*\/<\/span> @media<\/span> print<\/span> and<\/span> (min-resolution:144<\/span>dpi){\r\n\r\n}\r\n\r\n\/*Print<\/span> Resolution 96<\/span> dpi*\/<\/span> @media<\/span> print<\/span> and<\/span> (min-resolution:96<\/span>dpi){\r\n\r\n}\r\n\r\n\/*Print<\/span> Resolution 72<\/span> dpi*\/<\/span> @media<\/span> print<\/span> and<\/span> (resolution:72<\/span>dpi){\r\n\r\n}\r\n<\/pre>\n
\n\t\n<\/p>\n
\n\t\u5982\u9700\u8f6c\u8f7d\uff0c\u70e6\u8bf7\u6ce8\u660e\u51fa\u5904\uff1ahttp:\/\/www.w3cplus.com\/css3\/media-query-snippets.html\n<\/p>\n
\n\t\n<\/p>\n
\n\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Responsive\u8bbe\u8ba1\u5728\u73b0\u4ee3Web\u8bbe\u8ba1\u4e2d\u53ef\u8c13\u662f\u8d8a\u6765\u8d8a\u6d41\u884c\uff0c\u4f46\u5f88\u540c\u5b66\u4eec\u5e76\u672a\u7406\u89e3\u5176\u771f\u6b63\u7684\u8bbe\u8ba1\u6982\u5ff5\uff0c\u5f80\u5f80\u628aResp\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[45,40,46],"class_list":["post-520","post","type-post","status-publish","format-standard","hentry","category-js","tag-css3","tag-html5","tag-media-"],"_links":{"self":[{"href":"https:\/\/www.shuran.cn\/index.php?rest_route=\/wp\/v2\/posts\/520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shuran.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shuran.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shuran.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shuran.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=520"}],"version-history":[{"count":1,"href":"https:\/\/www.shuran.cn\/index.php?rest_route=\/wp\/v2\/posts\/520\/revisions"}],"predecessor-version":[{"id":521,"href":"https:\/\/www.shuran.cn\/index.php?rest_route=\/wp\/v2\/posts\/520\/revisions\/521"}],"wp:attachment":[{"href":"https:\/\/www.shuran.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shuran.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shuran.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}