响应式设计+ rem

Posted 孙倩倩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式设计+ rem相关的知识,希望对你有一定的参考价值。

特点:手机,ipad,PC 所有的终端设备上完美展示;

核心点: 

//PC端样式调整

@media screen and (max-width: 1024px){

}

//平板的宽度

@media screen and (max-width: 980px){

}

@media screen and (max-width:720px){

}

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

}

//手机端

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

}

当设备符合条件时就会自动调整

 

响应式设计中相关参数:

1)媒体类型

      ① screen ---屏幕

      ② print ----打印机

      ③ handheld --- 手持设备

      ④  all ---通用

2)媒体查询参数

       ① width---视口宽度

       ② height---视口高度

       ③device-width--- 设备宽度

       ④ device-height --- 设备高度

       ⑤ orientation----检查设备处于横向(landscape)还是 竖屏 (portrait)

设计点1: 百分比布局

设计点2 : 弹性图片

                img { width:100% ;height: auto }

设计点3: 重新布局,显示与隐藏

当页面达到手机屏幕宽度时候,就要放弃一些传统页面设计。比如: 同比例缩减元素尺寸,调整页面结构布局,隐藏冗余的元素。

注意: 经常需要切换位置元素使用‘绝对定位’,减少重绘提高渲染性能;

 

响应式设计问题: 当一个移动设备访问一个响应式页面时就会将所有样式下载,但是这些都是冗余的。

但是相对有优缺点,优点: 减少重复开发,缺点: 性能不是最优

 

关于移动设备上CSS样式处理

1)高清图片:(retina屏幕)

在移动web页面上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染,即是100*100的图片,应该使用100dp*100dp;

width:(w_value/dpr)px;  height:(h_value/dpr)px;

 

2)1px 边框

解决方案: 

① border: 0.5px (仅仅 ios 8 支持)

② 利用scaleY(0.5)

li { position: relative }

//每个li的下面都加一条1px 边框

li+ li:before {

      position: absolute;

      left: 0; top:-1px;

      content: ‘‘;

      width: 100%;height: 1px;

      border-bottom: 1px solid #eee;

      -webkit-tranform: scaleY(.5);

}

3)

  3.1)单行文本溢出(标题类使用居多)

            overflow: hidden; //内容超出隐藏

            white-space: nowrap;  //文本不换行 

            text-overflow: ellipsis;  //文本超出时显示省略号

    3.2)多行文本溢出(详情介绍使用居多)

            display: -webkit-box !important; //伸缩布局

            overflow: hidden;

           text-overflow: ellipsis;

           word-break: break-all;

           -webkit-box-orient: vertical;

           -webkit-line-clamp:2; //从第几行截断

 

重点来了!!!!!

相对单位REM

为了使用各大屏幕的手机,px相对于死板,不能根据尺寸的大小而改变,使用相对单元更能体验页面的兼容性。

 

em   是根据父节点 的font-size 为相对单位;(em在多层嵌套下难以使用)

rem   是根据 html 的font-size 为相对单位;  (更能作为全局统一设置的度量单位)    .

在使用rem时,基值如何设置?

方案1.  screen.width/10

     //默认320px 

    html {  font-size: 32px }

    //iphone 6 

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

              html{  font-size: 37.5px   }

     }

    //iphone 6 plus

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

              html{  font-size: 41.4px   }

     }

方案2: 

rem = screen.width/20   (这里考虑到dpr)

 

不适用rem 的情况: font-size 

 

以上是关于响应式设计+ rem的主要内容,如果未能解决你的问题,请参考以下文章

rem 响应式用法

响应式设计之 —— em 和 rem

响应式布局-Rem的用法

基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

响应式网站设计

响应式布局-PC端和移动端同时适配