html media 手机,手机端兼容各大屏幕方案之media query+rem

手机屏幕的差异化使手机端网页编写者头疼不已，我们尝试不少方案去实现不同屏幕的兼容。ecstore系统本身也带有手机端，可是实现手机端的屏幕兼容也是一个难题，即便熟悉ecstore程序的人这也是一项新技术。本人最近也做了不少ecstore手机触屏端，研究过不少方案来实现其兼容，发现media query+rem方案确实是比较实用和简单的一个方法。一起来看看具体方法。

1.rem和media query介绍：

rem：用法很简单，就是根标签html设置文字大小后(不设置的话，大部份浏览器默认为16px)，其他标签设置rem都是html大小的倍数

media query：针对设备设置根元素大小。

注：有关rem和media query具体介绍这里就不做详细介绍了，需要了解的就去找度娘吧。

2..rem值与常用单位px切换：

10px  = 1rem 在根元素(font-size = 10px的时候)；

20px  = 1rem 在根元素(font-size = 20px的时候)；

40px  = 1rem 在根元素(font-size = 40px的时候)；

3.给出不同分辨率下html的font-size的值：@media only screen and (max-width: 320px){

html {

font-size: 5px !important;

}

}

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

html {

font-size: 5px !important;

}

}

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

html {

font-size: 6px !important;

}

}

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

html {

font-size: 7.5px !important;

}

}

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

html {

font-size: 10px !important;

}

}

ok，我们知道怎么个切换法，也给出一组不同分辨率下font-size的值，这样就可以用rem单位进行页面设计了。当然你也可以根据给出的font-size值推断出其他屏幕的font-size值。甚至可以用百分比来设置font-size值，这里就不做具体介绍了。