本篇文章給大家分享的是有關(guān)開發(fā)響應(yīng)式web頁面的示例分析，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站建設(shè)、鄞州網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、鄞州網(wǎng)絡(luò)營銷、鄞州企業(yè)策劃、鄞州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供鄞州建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：jinyejixie.com

   響應(yīng)式 web 設(shè)計開發(fā)，使用媒體查詢來適應(yīng)不同的手機屏幕樣式開發(fā)時，我們需要寫不同的樣式，為此我們來分享下我個人開發(fā)響應(yīng)式web頁面的經(jīng)驗；針對目前手機的獨立像素有320，360，384，400，還有iphone6+是414的獨立像素，因此我們只需要針對目前這幾種匹配即可；如下:

• 1. 針對手機獨立像素是360 ~399等屏幕的寬度

     /*

     * 但是邊距 字體大小等還是安裝360px來計算

     */

     @media (min-width:360px) and (max-width: 399px) {}

• 2. 針對手機獨立 像素 是320~359之間的

     /* min-width:320px

     * 針對設(shè)備獨立像素為320px 的css

     * min-width:320 和 max-width:359之間

     */

     @media (min-width: 320px) and (max-width:359px){}

• 3. 針對設(shè)備獨立像素為400px以上的樣式。

      /*

      * 針對設(shè)備獨立像素為400px，邊距等等都按400px來計算

      */

      @media (min-width: 400px) and (max-width:450px){}

• 4. 針對設(shè)備獨立像素為640px ~ 999px的css

      /* min-width:640px

      * 針對設(shè)備獨立像素為640px 的css

      * min-width:640 和 max-width:999之間

      * 邊距等按640px來計算

      */

      @media (min-width: 640px) and (max-width:999px){}

• 5. 但是在PC端，我們?yōu)榱诉m應(yīng)PC端，所以針對寬度為1000以上也做一個顯示處理。

     /* 最小寬度1000樣式

     *為了適應(yīng)PC端 所以PC端在設(shè)計時候 默認以1000px來設(shè)計的

     */

     @media screen and (min-width:1000px) {}

   為了方便計算字體，我們來設(shè)置瀏覽器10px，我們都知道瀏覽器默認的像素是16px，因此我們需要對html{font-size:62.5%;} // 10 / 16 = 62.5%;

   首先假如設(shè)計搞在移動端上是按照750px設(shè)計稿上的話，假如字體在750px下字體大小我們使用rem來寫大?。荒敲此麄兊淖煮w大小在各個獨立像素下如下計算：

• 6.針對設(shè)備獨立像素為640px ~ 999px的css

      @media (min-width:640px) and (max-width: 999px) {

           /* 750/640 = 1.17*/

            html{font-size: 53.42%;}  /*62.5% / 1.17 */

      }

     @media (min-width: 400px) and (max-width:450px){

          /*  750 / 400 = 1.875 */

         html{font-size:33.33% } /* 62.5% / 1.875 */

      }

      @media (min-width:360px) and (max-width: 399px) {

           /*  750 / 360 = 2.08 */

          html{font-size:30%}   /* 62.5% / 2.08  */

      }

     @media (min-width: 320px) and (max-width:359px){

          /*  750/320 = 2.34 */

         html{font-size: 26.7%}  /* 62.5 / 2.34 */

     }

• 7.針對寬度，高度，background-size, margin及 padding 的計算方法；

     假如在750px下的寬度是132px；高度是132px；background-size:132px 132px; margin:20px;Padding:20px;針對設(shè)備獨立像素為640px ~ 999px的css

     @media (min-width:640px) and (max-width: 999px) {

           /* 750/640 = 1.17*/

           html{font-size: 53.42%;}  /*62.5% / 1.17 */

           // 下面的屬性都是 本身的像素 / 1.17 得來的

         width: 112.82px;      // 132 / 1.17

         height:112.82px;      // 132 / 1.17

         background-size:112.82px 112.82px;  // 132 / 1.17

         margin:17.09px;   // 20 / 1.17

         padding:17.09px;  // 20 / 1.17

     }

    @media (min-width: 400px) and (max-width:450px){

         /*  750 / 400 = 1.875 */

         html{font-size:33.33% } /* 62.5% / 1.875 */

         // 下面的屬性都是 本身的像素 / 1.875 得來的

         width: 70.4px;      // 132 / 1.875

         height: 70.4px;      // 132 / 1.875

         background-size: 70.4px 70.4px;  // 132 / 1.875

         margin:10.67px;   // 20 / 1.875

         padding: 10.67px;  // 20 / 1.875

    }

   @media (min-width:360px) and (max-width: 399px) {

          /*  750 / 360 = 2.08 */

         html{font-size:30%}   /* 62.5% / 2.08  */

         // 下面的屬性都是 本身的像素 / 2.08 得來的

         width: 63.46px;      // 132 / 2.08

         height: 63.46px;      // 132 / 2.08

         background-size: 63.46px  63.46px;  // 132 / 2.08

         margin:9.62px;   // 20 / 2.08

         padding: 9.62px;  // 20 / 2.08

    }

   @media (min-width: 320px) and (max-width:359px){

         /*  750/320 = 2.34 */

        html{font-size: 26.7%}  /* 62.5 / 2.34 */

        width: 56.41px;      // 132 / 2.34

        height: 56.41px;      // 132 / 2.34

        background-size: 56.41px  56.41px;  // 132 / 2.34

        margin:8.55px;   // 20 / 2.34

        padding: 8.55px;  // 20 / 2.34

   }

但是有時候在小屏幕下字體太小了，使用戶看起來太吃力，我們可以針對小屏幕下適當(dāng)?shù)舸笠稽c即可；

以上就是開發(fā)響應(yīng)式web頁面的示例分析，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：開發(fā)響應(yīng)式web頁面的示例分析
瀏覽地址：http://jinyejixie.com/article22/jpdojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、商城網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)站維護、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)