<address id="t193p"></address>

      <noframes id="t193p"><address id="t193p"><nobr id="t193p"><meter id="t193p"></meter></nobr></address>

          <address id="t193p"></address>

          <em id="t193p"><strike id="t193p"><pre id="t193p"></pre></strike></em>
          <form id="t193p"><th id="t193p"><progress id="t193p"></progress></th></form>
          ?

          網站設計響應式HTML5布局和自適應的代碼
           瀏覽:112

          網站響應式HTML5布局設計和自適應代碼經常遇到要用到的問題,今天張楷總結一下網站設計響應式或者自適應的方法及代碼。

          1、首先在網頁代碼的頭部,加入一行viewport標簽
           
          在網頁的頭部中增加以下這句話,可以讓網頁的寬度自動適應手機屏幕的寬度
           
          width=device-width    width為設置layout viewport 的寬度,為一個正整數,device-width表示寬度是設備屏幕的寬度
          initial-scale=1.0    initial-scale為設置頁面的初始縮放值,可以是一個帶小數的數字,1.0就是占網頁的100%
           
          minimum-scale=1.0 表示最小的縮放比例
           
          maximum-scale=1.0 表示最大的縮放比例
           
          user-scalable=no 表示用戶是否可以調整縮放比例,值為”no”或”yes”
           
          2、寬度不要用絕對的
           
          width:auto; / width:XX%;(父元素一定要有寬度)
           
          3、字體大小是頁面默認大小的100%,即16像素,不要使用絕對大小"px",要使用相對大小“rem”
          html{font-size:62.5%;}
          body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
          html的字體大小設置為font-size:62.5%原因:瀏覽器默認字體大小是16px,rem與px關系為:1rem = 10px,10/16=0.625=62.5%,為了子元素相關尺寸計算方便,這樣寫最合適不過了。
           
          4、流動布局,"流動布局"的含義是,各個區塊的位置都是浮動的,不是固定不變的
          .left{ width:30%; float:left}
          .right{ width:70%; float:right;}
           
          像這樣,用左浮動和右浮動,好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現
           
           
          5、選擇加載CSS
           
          "自適應網頁設計"的核心,就是CSS3引入的Media Query模塊。自動探測屏幕寬度,然后加載相應的CSS文件
           
          這段代碼的意思是:如果屏幕寬度小于600像素(max-device-width: 600px),就加載css600.css文件。
          如果屏幕寬度在600像素到980像素之間,則加載css600-980.css文件
           
          還有(不建議使用):除了用html標簽加載CSS文件,還可以在現有CSS文件中加載
          @import url("css600.css") screen and (max-device-width: 600px);
           
          6、CSS的@media與@media screen,媒體查詢/匹配
           
          媒體查詢也是css3的方法,我們要解決的問題是適應手機屏幕
          媒體查詢的功能就是為不同的媒體設置不同的css樣式,這里的“媒體”包括頁面尺寸,設備屏幕尺寸等。
          首先先講一下@media與@media screen區別
          @media與@media screen兩者在手機設備上沒有區別,但@media screen的css在打印設備里是無效的,而@media在打印設備里是有效的,如果css需要用在打印設備里,那么就用@media 。
          以@media或@media screen and開頭來表示這是一條媒體查詢語句。@media后面的是一個或者多個表達式,如果表達式為真,則應用樣式。
          @media
          @media (max-width: 600px) {
          .mainner {
          display: none;
          }
          }
           
          上面的代碼在屏幕寬度小于 600px 的時候,會作用大括號里的內容。
           
          注:max-width是目標顯示區域的寬度,例如,瀏覽器寬度。
          媒體查詢可以在 link標簽上加media屬性或css文件中使用。具體例子就不舉了。
          @media screen
          以下例子為當屏幕寬度小于400px的時候,就取消浮動
          @media screen and (max-device-width: 400px)
          { .left {
          float:none;
          }
          }
           
          注:max-device-width是設備整個顯示區域的寬度,例如,真實的設備屏幕寬度。
           
          知識擴展
          @media only screen and
          only(限定某種設備)
          screen 是媒體類型里的一種
          and 被稱為關鍵字,其他關鍵字還包括 not
          not 指定某種特定的媒體類型,可以用來排除不支持媒體查詢的瀏覽器:
          例如:如果瀏覽器窗口小于 500px, 背景將變為淺藍色:
          @media only screen and (max-width: 500px) {
          body {
          background-color: lightblue;
          }
          }
           
          7、圖片自適應,"自適應網頁設計"還必須實現圖片的自動縮放。
           
          img {width: 100%;}
          windows平臺縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令
          img { width:100%; -ms-interpolation-mode: bicubic;}
          或使用js–imgSizer.js
          addLoadEvent(function() {
          var imgs = document.getElementById("content").getElementsByTagName("img");
          imgSizer.collate(imgs);
          });


          網站做響應式設計用HTML5,重點是用CSS的樣式細節。響應式會較順暢,自適應代碼重點判斷切換PC手機端。


          以上就是關于【網站設計響應式HTML5布局和自適應的代碼】的文章內容,如果您還想了解更多關于網站建設與營銷推廣的相關文章,請繼續查看【網站建設】欄目的其它文章

          來源http://www.nettifarmi.com/wangzhanjianshe/36.html明行威網絡技術,專注網站建設開發、微信小程序制作、網站代運營(SEM、SEO等)、企業SEO內訓等

          歡迎交流 添加企業微信:478887042 
          掃碼關注

          【相關推薦】
          【網站案例】
          網絡推廣
          在線咨詢
          廣州
          020-28174113
          15017594623
          惠州辦事處
          13725092347
          肇慶辦事處
          15813353380
          東莞辦事處
          15913714680

          保存二維碼用微信掃一掃

          確定
          国产版偷拍久久免费动漫,亚洲一区二区国产,麻豆md pud传媒在线,韩国姐姐的朋友电影,国产日韩制服丝袜中文,国产情侣对白免费观看,国产萝莉vip,国产网红在线Av 国产美女主播网红| 让外国人抓狂的中文字幕| 国产外卖热门事件在线视频| 午夜手机影院在线观看视频播放| 大香蕉国产巨乳在钱| 国产剧情制服丝袜在线视频| 国产女女丝袜系列ed2k 迅雷下载地址| 热 国产偷拍| 琳琅网站日本国产精品网红| 女团双下巴中文字幕| 国产厕偷拍正面图图片| 国产主播精彩在线喷水| 韩国青训| 麻豆传媒很黄| 日本直邮网站| 日本大奶视频| 驻欧美军费用| 欧美叉叉| 欧美艳星斯| 欧美you| 麻豆传媒爱剪辑| 麻豆传媒磁力种子mp4| 欧美素描花臂| 狼人欧美| 韩国十九禁 下载| 91在线偷拍国产情侣| 库里打科比视频中文字幕| 萌白酱在线开炮| 国产偷拍av欧美激情| 制服国产欧美亚洲日韩| sm国产母狗magnet| 久久伊人精品影视综合| 恋足sm国产免费文章| 动漫系列男生和女生一起差差| 日本AV电影一区二区三区| 国产剧情猎人| 日本菜贵| 国产丝袜链接链接 下载地址| 果冻传媒七七在线观看| 雅虎日本网| 秘密的粪壶大便女同性恋磁力| http://www.asongift.com http://www.beekmanlane.com http://www.ytouporn.com http://www.emeraldhardwoodfloors.com http://www.wearefga.com http://www.d-com-d.com