rem基值设置

1像素边框

// 单行文本溢出...
.inaline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 多行文本溢出
intwoline {
  display: -webkit-box !important;
  overflow: hidden;
  
  text-overflow: ellipsis;
  word-break: break-all;
  
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

文本溢出！

1像素边框。

多行文本溢出

rem布局

一像素边框

多行文本溢出 点点（......）

不使用rem的情况

相对单位rem

一像素边框

保持图片高清

这em和rem用法听得我有点晕

移动web特别样式处理：

高清图片

1像素边框

rem

多文本溢出

文本溢出 -- 常见情况：

可以有更优雅的处理

不仅从技术层面 从设计层面就应考虑

不适合rem的情况：

有的情况需要混合使用各个技术，为的就是使页面的兼容性调到最好：

移动屏幕兼容：

1- 在不同屏幕环境下 变现不一致 有针对性

2- 在不同屏幕环境下 尺寸 像素 表现一致

rem的值如何设置：

常规设置方法

2- 一像素边框：

1） 高清屏中 1px = 2db

2) 利用sacleY()来进行缩放

多行文本溢出

多行文本溢出

-webkit-box-orient:vertical；//方向

-webkit-line-clamp:3;//行数

多行文本溢出

-webkit-line-clamp:num 显示几行

不使用rem的情况：font-size

rem的基值设置

换算公式

相对单位 rem

一像素边框

移动Web渲染图片

高清图片