1. <form id="m0xjc"></form>

      濟(jì)寧果殼科技專業(yè)軟件開發(fā)團(tuán)隊(duì),提供全方位的互聯(lián)網(wǎng)服務(wù)!
      座機(jī):15563775221 手機(jī):15563775221(微信)

      熱門標(biāo)簽

      1. 首頁
      2. 果殼學(xué)院
      3. 濟(jì)寧網(wǎng)站建設(shè)
      4. 實(shí)用的移動(dòng)端布局技巧
      實(shí)用的移動(dòng)端布局技巧

      實(shí)用的移動(dòng)端布局技巧

      濟(jì)寧網(wǎng)站建設(shè),濟(jì)寧微信公眾號開發(fā),濟(jì)寧seo優(yōu)化推廣,濟(jì)寧手機(jī)APP開發(fā),濟(jì)寧微商城開發(fā),濟(jì)寧做網(wǎng)站,濟(jì)寧網(wǎng)絡(luò)公司,濟(jì)寧果殼科技

      濟(jì)寧果殼科技

      2017-12-08 17:25:19

      0

      4851

      1.添加meta,使得網(wǎng)頁在手機(jī)端能正常瀏覽



      <html>

      <!-- 設(shè)置縮放 -->

      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
      <!-- 可隱藏地址欄,僅針對IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) -->
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <!-- 僅針對IOS的Safari頂端狀態(tài)條的樣式(可選default/black/black-translucent ) -->
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />
      <!-- IOS中禁用將數(shù)字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->
      <meta name="format-detection" content="telephone=no, email=no" />


      2.考慮是使用px,還是使用rem
      對于只需要適配少部分手機(jī)設(shè)備,且分辨率對頁面影響不大的,使用px即可;
      如果需要高精度還原,適配各種手機(jī),最好還是使用rem吧

      1)使用px布局,寬度可使用百分比伸縮,高度使用固定像素


      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />
      <meta name="format-detection" content="telephone=no, email=no" />
      <title></title>
      <style type="text/css">
      body{
      margin: 0;
      padding: 0;
      width: 320px;
      height: 568px;
      background:#fafafa;
                                      border:1px solid #ccc;
      }
      .div1{
      width: 40%;
      height: 60px;
      background: #FF0000;
      float:left;
      }
      .div2{
      width: 60%;
      height: 60px;
      background: #FF7E00;
      float:left;
      }
      </style>
      </head>
      <body>
      <div class="div1">40%</div>
      <div class="div2">60%</div>
      </body>
      </html>



      效果如下

      微信圖片_20171208171432.png


      2)使用rem的話,需要有一個(gè)輔助才能打出高額的傷害;從常用的兩個(gè)輔助中選擇一個(gè);
         輔助一,使用@media,根據(jù)屏幕大小自動(dòng)調(diào)整
      可以看看這篇文章詳細(xì)介紹《CSS3的REM設(shè)置字體大小》

      輔助二,使用js動(dòng)態(tài)計(jì)算,這個(gè)簡直好用的不得了,簡直完美還原設(shè)計(jì)稿


      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
          <meta name="apple-mobile-web-app-capable" content="yes">
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <title>template</title>
          <script>
          //這個(gè)是小米官網(wǎng)的寫法
          ! function(n) {
      var e = n.document,
      t = e.documentElement,
      i = 720, //設(shè)計(jì)圖尺寸
      d = i / 100, //1rem = 100px
      o = "orientationchange" in n ? "orientationchange" : "resize",
      a = function() {
      var n = t.clientWidth || 320;n > 720 && (n = 720);
      t.style.fontSize = n / d + "px"
      };
      e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
      }(window);
          </script>
          <style>
          *{box-sizing: border-box;}
          body{margin: 0;padding: 0;font-size: 16px;}
              .block{background: #1e90ff;width: 7.2rem;height: 2rem;}
              .block2{background: #ef4437;width: 3.6rem;height: 3.6rem;}
          </style>
          </head>
          
          
      <body>
      <div class="wrap">
      <div class="block">100% 7.2rem 設(shè)計(jì)圖尺寸720,1rem=100px</div>
      <div class="block2">50% 3.6rem</div>
      </div>
      </body>
      </html>


      效果如下

      微信圖片_20171208171653.png


      3.頁面樣式重置,這個(gè)在pc端還是移動(dòng)端都會用到的


      /*css初始化*/
      body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
      body{font-size:16px;font-family: "微軟雅黑","microsoft yahei","microsoft sans serif";background: #ededed;color: #313131;} 
      a,a:hover{text-decoration:none;color:inherit;} 
      em,i{font-style:normal} 
      li{list-style:none} 
      img{border:0;vertical-align:middle} 
      table{border-collapse:collapse;border-spacing:0} 
      p{word-wrap:break-word} 
      input,textarea{outline: none;font-family: "微軟雅黑","microsoft yahei";}
      *{box-sizing: border-box;} /*使用border-box盒模型使得計(jì)算位置、大小更方便*/
      input[type='submit'],input[type='button'],input[type='reset']{-webkit-appearance: none;}/*消除iPhone上按鈕顯示怪異的情況*/


      4.使用一屏布局
      這個(gè)是我在查看一些UI框架發(fā)現(xiàn)的東西,整個(gè)頁面分三塊不超過一屏,header、contaner、footer。
      內(nèi)容都放在container中,超過就overflow-y:scroll;
      這個(gè)其實(shí)挺好用的,使得頁面結(jié)構(gòu)清晰,布局容易


      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
      <title></title>
      <style type="text/css">
      body,html{
      position: absolute;
      margin: 0;
      padding: 0;
      width: 320px;
      height: 100%;
      }
      *{box-sizing: border-box;}
      .g-page{
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: #FAFAFA;
      }
      .g-header{
      position: absolute;
      top: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #EF4437;
      color: #fff;
      text-align: center;
      z-index: 10;
      }
      .g-content{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      background: #008000;
      }
      .g-footer{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #666;
      color: #fff;
      text-align: center;
      }
      .g-header ~ .g-content{
      top: 40px;
      }
      .g-footer ~ .g-content{
      bottom: 40px;
      }
      .div1{
      height: 300px;
      background: #909090;
      }
      .div2{
      height: 300px;
      background: #82615f;
      }
      .div3{
      height: 300px;
      background: #1e90ff;
      }
      </style>
      </head>
      <body>
      <div class="g-page">

      <div class="g-header">頭部</div>

      <div class="g-footer">頁腳</div>

      <div class="g-content">
      <div class="div1">
      內(nèi)容
      </div>
      <div class="div2">
      內(nèi)容
      </div>
      <div class="div3">
      內(nèi)容
      </div>
      </div>

      </div>
      </body>
      </html>


      效果如下

      微信圖片_20171208171937.png


      5.左邊定寬,右邊自適應(yīng)的布局,我們會經(jīng)常用到


      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
      <style>
      body{margin: 0;padding: 0;}
      *{box-sizing: border-box;}
      .container-1{
      display: flex;
      height: 150px;
      margin-bottom: 40px;
      }
      .container-1 .left{
      width: 150px;
      height: 100%;
      background: #1E90FF;
      }
      .container-1 .right{
      flex: 1;
      height: 100%;
      background: #ef4437;
      }

      .container-2{
      position: relative;
      width: 100%;
      height: 150px;
      margin-bottom: 40px;
      }
      .container-2 .left{
      position: absolute;
      width: 150px;
      height: 100%;
      background: #EF2322;
      z-index: 2;
      }
      .container-2 .right{
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      padding-left: 150px;
      background: #1E90FF;
      }

      .container-3{
      overflow: hidden;
      height: 150px;
      }
      .container-3 .left{
      float: left;
      width: 150px;
      height: 100%;
      background: #1E90FF;
      }
      .container-3 .right{
      /*width: 100%;*/
      height: 100%;
      padding-left: 150px;
      background: #EF2322;
      }
      </style>
      </head>
      <body>
      <div style="width: 800px;margin: 0 auto;">
      <div class="container-1">
      <div class="left"></div>
      <div class="right"></div>
      </div>

      <div class="container-2">
      <div class="left"></div>
      <div class="right"></div>
      </div>

      <div class="container-3">
      <div class="left">2222222222222</div>
      <div class="right">1111111111111111111111111111111111111111111111<br>222222222222222</div>
      </div>
      </div>

      </body>
      </html>


      微信圖片_20171208172047.png


      6.模塊化、組件化開發(fā),防止css命名重復(fù),提高開發(fā)效率
      這個(gè)對我這個(gè)英語詞匯量不大的來說,簡直是福音啊,
      以前寫css老是怕重名,寫的各種奇怪命名,效率還低,
      自從有了這個(gè)媽媽再也不用擔(dān)心 如何優(yōu)雅的寫出代碼

      7.一像素的問題
      在高分屏上寫一個(gè)像素邊框,那顯示的活脫脫的就是兩個(gè)像素,
      設(shè)計(jì)師不滿意,老板不滿意;
      我們可以用偽元素和css3來解決


      .item{
          width:2rem;
          height:0.5rem;
      }
      .item:after{
          content: " ";
          position: absolute;
          left: 0;
          right: 0;
          height: 1px;
          z-index: 2;
          bottom: 0;
          border-bottom: 1px solid #D9D9D9;
          -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
          -webkit-transform: scaleY(.5);
          transform: scaleY(.5);
      }

      如果你想做一個(gè)手機(jī)網(wǎng)站微官網(wǎng)微商城,來濟(jì)寧果殼科技,這里應(yīng)有盡有~~

      濟(jì)寧網(wǎng)站建設(shè),濟(jì)寧微信公眾號開發(fā),濟(jì)寧seo優(yōu)化推廣,濟(jì)寧手機(jī)APP開發(fā),濟(jì)寧微商城開發(fā),濟(jì)寧做網(wǎng)站,濟(jì)寧網(wǎng)絡(luò)公司,濟(jì)寧果殼科技


      定制首選 果殼科技 咨詢熱線:0537-2551991

      關(guān)閉咨詢框
      狠狠爱天天综合色欲网,国产真人无码作爱免费视频禁免费,三级国产在线观看,人妻免费公开在线视频
      1. <form id="m0xjc"></form>