移动端响应式

最新推荐文章于 2023-07-14 22:13:43 发布

weixin_33826268

最新推荐文章于 2023-07-14 22:13:43 发布

阅读量73

点赞数

原文链接：https://segmentfault.com/a/1190000009671166

版权

0.一些基础

请看这篇：HcySunYang的blog：一篇真正教会你开发移动端页面的文章(二)
width=device-width 这段代码是让布局视口的尺寸等于理想视口。
设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）

1.常规情况下js根据屏幕宽度动态计算


!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

2.媒体查询较密集的断点

使用css3 media query 实现；
另可以使用sass的calc（）。

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}

3.强大的单位——vw

使用单位 vw 实现动态计算。

html {
    font-size: 31.25vw; /* 表达式：100*100vw/320 */
}

首先，支持 CSS3 calc方法和 rem、vw单位的浏览器下，只需要html {font-size: 15.625vw;}这样一句就好，另外加个媒体查询限制下。
不过考虑到国内兼容性的问题，还是结合媒体查询来使用比较好。（媒体查询的断点暂时是借用上面的例子）这里写图片描述

4.令设计尺寸font-size:100px计算出rem，动态设置html font-size

1、拿到设计图，计算出页面的总宽，为了好计算，取100px的font-size，如果设计图是iPhone6的那么计算出的就是7.5rem，如果页面是iPhone5的那么计算出的结果就是6.4rem。
2、动态设置html标签的font-size值：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';

如iPhone6的设计图就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

iPhone5的设计图就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

3、做页面是测量设计图的px尺寸除以100得到rem尺寸。
4、和淘宝的做法一样，文字字体大小不要使用rem换算，而是使用媒体查询（？？？）
可为什么不用rem呢？后来去查了一番资料，发现有一种叫做点阵字体的存在（什么是点阵字体），也叫作位图字体，位图我们都知道，跟矢量图是有区别的，就是放大会模糊，所以点阵字体也是放大会模糊的，如果根据rem设置字体大小，字体会自由缩放，可能就会导致点阵字体模糊，所以需要设定使用几种固定大小的字体。不过，在正常情况下，系统自带的字体都是矢量字体，所以使用rem为单位是没有问题的，除非你的网页需要用到特殊的点阵字体。

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>

    <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</body>
</html>

5.lib.flexible

手淘开源库

总结

宽度用百分比，高度用rem，字号用rem或媒体查询，或者直接用手淘开源库。

!需注意chrome的font-size不能小于12px

流式布局（百分比) 横向易被拉长，兼容性；
定宽。。。
响应式工作大，维护性难；
viewport缩放；
天猫，使用flex布局，字体单位用px
淘宝，使用 flexible 库，是他们自己的一个库，思想就是根据DPR去动态设置rem，元素宽高都用rem。这样就和以前在PC上一样了，宽高等等都用固定值。
网易

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
    @media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}

@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}
    </style>
</head>
<body>
    <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</body>
</html>

weixin_33826268

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端响应式

0.一些基础请看这篇：HcySunYang的blog：一篇真正教会你开发移动端页面的文章(二)width=device-width 这段代码是让布局视口的尺寸等于理想视口。设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）1.常规情况下js根据屏幕宽度动态计算!(function(doc, w...
复制链接

扫一扫