开发响应式web页面的经验

默认分类 | 2018-11-20 10:46:30 | 阅读 117 次 | 评论(0)

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

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

     /*

      * 但是边距 字体大小等还是安装360px来计算

      */

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

     2. 针对手机独立像素320~359之间的

     /* min-width:320px

      * 针对设备独立像素为320px 的css

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

      */

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

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

      /*

       * 针对设备独立像素为400px,边距等等都按400px来计算

       */

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

      4. 针对设备独立像素为640px ~ 999pxcss

      /* min-width:640px

       * 针对设备独立像素为640px 的css

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

       * 边距等按640px来计算

       */

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

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

     /* 最小宽度1000样式

      *为了适应PC端 所以PC端在设计时候 默认以1000px来设计的

      */

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

 

一:使用rem来设置字体

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

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

1. 针对设备独立像素为640px ~ 999pxcss

      @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 */

     }

二: 针对宽度,高度,background-size, marginpadding的计算方法;

   假如在750px下的宽度是132px;高度是132px;background-size:132px 132px; margin:20px;Padding:20px;

     针对设备独立像素为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

   }

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

 

 

文章评论,共0条
游客请输入验证码
浏览117次
文章分类
文章归档
最新评论