一、CSS3自適應
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

對應的CSS代碼：

@media (min-device-width:600px){ img[data-src-600px]{content: attr(data-src-600px,url);} } @media (min-device-width:800px){img[data-src-800px] {content:attr(data-src-800px,url);} } media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond)<!—[if lt IE9]><scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>?<![endif]> 1.1024px顯屏 @media screen and (max-width : 1024px) { /* 樣式寫在這里 */ } 2.800px顯屏 @media screen and (max-width : 800px) { /* 樣式寫在這里 */ } 3.640px顯屏 @media screen and (max-width : 640px) { /* 樣式寫在這*/ } 4.iPad橫板顯屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 樣式寫在這 */ } 5.iPad豎板顯屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 樣式寫在這 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 樣式寫在這 */ } 現在有關于這方面的運用也是相當的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。大家可以對比一下： @media (max-width: 480px) { ... } @media (max-width: 768px) { ... } @media (min-width: 768px) and (max-width: 980px) { ... } @media (min-width: 1200px) { .. }

?

<link rel="stylesheet" type="text/css" href="http://www.zhangxinxu.com/study/css/demo.css" media="all" /> <link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" /> <link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />


<script> if (!window.screenX) {//IE6~8var oStyle = document.createElement("link");oStyle.rel = "stylesheet";oStyle.type = "text/css";if (screen.width > 1024) {oStyle.href = "widthScreen.css"; } else {oStyle.href = "normalScreen.css"; }document.getElementsByTagName("head")[0].appendChild(oStyle); } </script>

　　

轉載于:https://www.cnblogs.com/wallaceyuan/p/4157060.html

總結

以上是生活随笔為你收集整理的有个名字叫随便乱记——css3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。