移动web特殊的样式处理

"Web前端: 移动Web特殊的样式处理"

移动web特殊的样式处理

1像素边框

同样是retain屏下的问题,根本原因:1px使用2px渲染导致

	```css
	  -webkit-transfrom:scale(.5)
	```

相对单位rem em

为了适应各大屏幕的手机,px略显固定,不能根据尺寸的大小而改变,使用相对单位更能体现页面兼容性

• em:是根据父节点的font-size为相对单位

• rem: 是根据html的font-size为相对单位

  Note: em在多层嵌套下,变得非常难以维护.rem更加能作为全局统一设置的度量.

rem的基值设为多少?

回归我们的目的:为了适应各大手机屏幕

```css
  rem=screen.width/20
```

方法二,直接拿屏幕的值为相对单位rem

	```css
	/*默认为320px*/

	html{
	  font-size:32px;
	}

	/*iphone 6*/
	@media (min-device-width:375px){
	  html{  font-size:37.5px; }
	}

	/*iphone 6 plus*/
	@media (min-device-width:375px){
	  html{  font-size:41.4px; }
	}
	```

换算公式

width:px/rem 基值 height:px/rem 基值

Notes:不使用rem的情况:font-size

一般来讲font-size是不应该使用rem等相对单位的,因为字体的大小是趋向于阅读的实用性,并不适合与排版布局.

同理趋向于一些固定的元素的特性.我们不实用rem而改为使用px去确保在不同屏幕上表现一致.(跟rem的目的相反)