移动端自适应

最新推荐文章于 2024-01-20 13:37:14 发布

小木马跳跳

最新推荐文章于 2024-01-20 13:37:14 发布

阅读量254

点赞数 1

分类专栏： JS 移动端文章标签：移动端

本文链接：https://blog.csdn.net/shanqianmin_new/article/details/52022374

版权

JS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

移动端

2 篇文章 0 订阅

订阅专栏

实现形式

名称	描述	缺点
流式布局	百分比来定义宽度，高度大都是用px来固定。	大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调。
固定页面宽度	超出部分留白	大屏幕手机下看起来页面会特别小，操作的按钮也很小。
响应式		维护性难
viewport	js控制viewport 的 initial-scale	initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。
rem

viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=3.0 />

rem

@media only screen

@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}

@media all and (min-width:xxx) and (max-width:xxx){
/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/
}

@media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/
}

js控制fontSize

!(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));

js控制html标签

<html data-dpr="2" style="font-size: 82.8px; width: 100%; height: 100%; overflow: hidden;">

小木马跳跳

关注

1
点赞
踩
2

收藏

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

实现形式名称描述缺点流式布局百分比来定义宽度，高度大都是用px来固定。大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调。固定页面宽度超出部分留白大屏幕手机下看起来页面会特别小，操作的按钮也很小。响应式维护性难 viewport js控制viewport 的 initial
复制链接

扫一扫