欧美一区二区三区性视频_婷婷综合另类小说色区_亚洲av乱码一区二区三区林ゆな_天堂在线资源中文在线8_久久这里只有精品首页

妙網(wǎng)科技 妙網(wǎng)科技 首頁 妙網(wǎng)科技 網(wǎng)站開發(fā) 妙網(wǎng)科技 制作自適應(yīng)網(wǎng)頁的方法

制作自適應(yīng)網(wǎng)頁的方法

所屬欄目： 網(wǎng)站開發(fā) | 更新時間：2015-12-29 | 閱讀：3740 次

  1. 在網(wǎng)頁代碼的頭部，加入一行viewport元標(biāo)簽。

    <meta name="viewport" content="width=device-width,initial-scale=1" />

    viewport是網(wǎng)頁默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。

  2. 2

    由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。對圖像來說也是這樣。

    具體說，CSS代碼不能指定像素寬度：

    width:xxx px;

    只能指定百分比寬度：

    width: xx%;

    或者

    width:auto;

  3. 3

    字體也不能使用絕對大?。╬x），而只能使用相對大小（em）。

    例如：

    body {font: normal 100% Helvetica, Arial,sans-serif;}

    上面的代碼指定，字體大小是頁面默認(rèn)大小的100%，即16像素。

  4. 4

    流動布局（fluid grid）

    "流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。

    .main {float: right;width: 70%; }

    .leftBar {float: left;width: 25%;}

    float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。

  5. 5

    "自適應(yīng)網(wǎng)頁設(shè)計"的核心，就是CSS3引入的MediaQuery模塊。

    它的意思就是，自動探測屏幕寬度，然后加載相應(yīng)的CSS文件。

    <link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />

    上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件。

    <link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />

    如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

    END

參考下面的例子——我稱它為“盒子”

  1. <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <!-- viewport meta to reset iPhone inital scale -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Demo: Responsive Design in 3 Steps</title>

    <!-- css3-mediaqueries.js for IE8 or older -->

    <!--[if lt IE 9]>

    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

    <![endif]-->

    <style type="text/css">

    body {

    font: 1em/150% Arial, Helvetica, sans-serif;

    }

    a {

    color: #669;

    text-decoration: none;

    }

    a:hover {

    text-decoration: underline;

    }

    h1 {

    font: bold 36px/100% Arial, Helvetica, sans-serif;

    }

    /************************************************************************************

    STRUCTURE

    *************************************************************************************/

    #pagewrap {

    padding: 5px;

    width: 960px;

    margin: 20px auto;

    }

    #header {

    height: 180px;

    }

    #content {

    width: 600px;

    float: left;

    }

    #sidebar {

    width: 300px;

    float: right;

    }

    #footer {

    clear: both;

    }

    /************************************************************************************

    MEDIA QUERIES

    *************************************************************************************/

    /* for 980px or less */

    @media screen and (max-width: 980px) {

    #pagewrap {

    width: 94%;

    }

    #content {

    width: 65%;

    }

    #sidebar {

    width: 30%;

    }

    }

    /* for 700px or less */

    @media screen and (max-width: 700px) {

    #content {

    width: auto;

    float: none;

    }

    #sidebar {

    width: auto;

    float: none;

    }

    }

    /* for 480px or less */

    @media screen and (max-width: 480px) {

    #header {

    height: auto;

    }

    h1 {

    font-size: 24px;

    }

    #sidebar {

    display: none;

    }

    }

    /* border & guideline (you can ignore these) */

    #content {

    background: #f8f8f8;

    }

    #sidebar {

    background: #f0efef;

    }

    #header, #content, #sidebar {

    margin-bottom: 5px;

    }

    #pagewrap, #header, #content, #sidebar, #footer {

    border: solid 1px #ccc;

    }

    </style>

    </head>

    <body>

    <div id="pagewrap">

    <div id="header">

    <h1>Header</h1>

    <p>Tutorial by <a >Web Designer Wall</a> (read <a >related article</a>)</p>

    </div>

    <div id="content">

    <h2>Content</h2>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    </div>

    <div id="sidebar">

    <h3>Sidebar</h3>

    <p>textg</p>

    <p>fgs</p>

    <p>fgsg</p>

    <p>dg</p>

    <p>dfgfd</p>

    <p>是否感到反感</p>

    <p>sgrtg</p>

    <p>分公司</p>

    <p>sgf</p>

    <p>text</p>

    </div>

    <div id="footer">

    <h4>Footer</h4>

    </div>

    </div>

    </body>

    </html>

?