开发响应式web页面的示例分析

本篇文章给大家分享的是有关开发响应式WEB页面的示例分析，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

   响应式web设计开发，使用媒体查询来适应不同的手机屏幕样式开发时，我们需要写不同的样式，为此我们来分享下我个人开发响应式web页面的经验；针对目前手机的独立像素有320，360，384，400，还有iphone6+是414的独立像素，因此我们只需要针对目前这几种匹配即可；如下:

•  针对手机独立像素是360 ~399等屏幕的宽度

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

• 针对手机独立像素是320~359之间的

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

• 针对设备独立像素为400px以上的样式。

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

• 针对设备独立像素为640px ~ 999px的CSS

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

• 但是在PC端，我们为了适应PC端，所以针对宽度为1000以上也做一个显示处理。

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

   为了方便计算字体，我们来设置浏览器10px，我们都知道浏览器默认的像素是16px，因此我们需要对html{font-size:62.5%;} // 10 / 16 = 62.5%;

   首先假如设计搞在移动端上是按照750px设计稿上的话，假如字体在750px下字体大小我们使用rem来写大小；那么他们的字体大小在各个独立像素下如下计算：

• 针对设备独立像素为640px ~ 999px的css

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

            html{font-size: 53.42%;} 

      }

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

         html{font-size:33.33% }

      }

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

          html{font-size:30%}  

      }

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

         html{font-size: 26.7%} 

     }

• 针对宽度，高度，background-size, margin及padding的计算方法；

     假如在750px下的宽度是132px；高度是132px；background-size:132px 132px; margin:20px;Padding:20px;针对设备独立像素为640px ~ 999px的css

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

           html{font-size: 53.42%;} 

           // 下面的属性都是 本身的像素 / 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){

         html{font-size:33.33% }

         // 下面的属性都是 本身的像素 / 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) {

         html{font-size:30%}  

         // 下面的属性都是 本身的像素 / 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){

        html{font-size: 26.7%} 

        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

   }

但是有时候在小屏幕下字体太小了，使用户看起来太吃力，我们可以针对小屏幕下适当掉大一点即可；

以上就是开发响应式web页面的示例分析，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。