通过rem编写自适应移动端要点

直接上干货

1，dpr 苹果手机像素是2 普通安卓机是1 也就是说1像素下苹果需要的像素点是安卓机的两倍所以一个需要15x15显示的图像安卓机仅需要提供15X15即可显示清楚苹果手机需要要30X30 你可以采用检测不同类型手机加载不同大小图为了保证像素

推荐做的时候用苹果大图然后在转化为不同尺寸。

2，rem 实现方法

在头部通过viewport 监控屏幕尺寸：

在css中利用css3 @media 呈现在不同尺寸屏幕下font-size 从而控制页面的等比放大

根html设置font-size 为67.5%时时1rem 为 10px

这里采用的是125%即为20px 是由于谷歌浏览器的最小显示是12px 为了方便调试并且我做完发现采用20效果还行

我这里做的时候是在340的基准下所以在360的屏幕下 font-size 应该时360/340 * 125% 约= 132.3 以此类推

html

{
font-size : 125%;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
height:100%
}

@media screen and (min-width: 321px) and (max-width: 360px){
html {
font-size: 132.3% ;
}

@media screen and (min-width: 361px) and (max-width: 375px){
html {
font-size: 137.9% ;
}
}

@media screen and (min-width: 376px) and (max-width: 414px){
html {
font-size: 152.2% ;
}
}

@media screen and (min-width: 415px) and (max-width: 435px){
html {
font-size: 160%;
}
}

@media screen and (min-width: 436px) and (max-width: 480px){
html {
font-size: 176.47%;
}
}

@media screen and (min-width: 641px) and (max-width: 769px){
html {
font-size: 250% ;
}
}

3，注意手机浏览器一般都有设置最小的字体显示打个比方就是你设置为5px 手机浏览器为了显示清楚会按照10px显示

因为10px 是这个手机浏览器内置要求的最小字体为了能显示5px的字

这里推荐采用css3 的scale属性通过缩放来模拟字体变小

手机端边框也有最小显示大小可能你在google浏览器的手机模拟上看着没问题但在真实手机上会出现边框消失现象

这里推荐将border设置成none 采用css3 的box-shadow属性来模拟边框 box-shadow: inset 0 0 .05rem #fff,
inset 0 .05rem 0 #fff,
0 0px .05rem 0px black;//这里是黑边框

4，手机端不支持hover 属性如果要模拟hover效果可以采用绑定touchstart 和 touchend 模拟效果这里li-active是触控后的样式

$(‘.readboy-catalog li‘).on(‘touchstart‘,function(e) {
$(this).addClass("li-active");
});

$(‘.readboy-catalog li‘).on(‘touchend‘,function(e) {

$(this).removeClass("li-active");

});

5，手机端因为要求尽可能少的加载资源所以这里不推荐使用jquery 而是更轻量级的zepto用法和jquery基本相同

6，手机端推荐的轮播插件swiper样式繁多且支持触控

后面再慢慢补充

时间： 2024-10-20 00:18:39

rem实现自适应