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

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

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

• 1. 針對(duì)手機(jī)獨(dú)立像素是360 ~399等屏幕的寬度

     /*

     * 但是邊距 字體大小等還是安裝360px來(lái)計(jì)算

     */

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

• 2. 針對(duì)手機(jī)獨(dú)立 像素 是320~359之間的

     /* min-width:320px

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

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

     */

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

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

      /*

      * 針對(duì)設(shè)備獨(dú)立像素為400px，邊距等等都按400px來(lái)計(jì)算

      */

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

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

      /* min-width:640px

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

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

      * 邊距等按640px來(lái)計(jì)算

      */

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

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

     /* 最小寬度1000樣式

     *為了適應(yīng)PC端 所以PC端在設(shè)計(jì)時(shí)候 默認(rèn)以1000px來(lái)設(shè)計(jì)的

     */

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

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

   首先假如設(shè)計(jì)搞在移動(dòng)端上是按照750px設(shè)計(jì)稿上的話，假如字體在750px下字體大小我們使用rem來(lái)寫(xiě)大小；那么他們的字體大小在各個(gè)獨(dú)立像素下如下計(jì)算：

• 6.針對(duì)設(shè)備獨(dú)立像素為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.針對(duì)寬度，高度，background-size, margin及 padding 的計(jì)算方法；

     假如在750px下的寬度是132px；高度是132px；background-size:132px 132px; margin:20px;Padding:20px;針對(duì)設(shè)備獨(dú)立像素為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 得來(lái)的

         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 得來(lái)的

         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 得來(lái)的

         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

   }

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

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

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

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

廣告

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