如何让样式适应不同的移动端

最新推荐文章于 2020-11-05 18:00:49 发布

allWords

最新推荐文章于 2020-11-05 18:00:49 发布

阅读量581

点赞数

分类专栏： ui java开发文章标签： html jsp HTML5 移动页面自适应手机屏幕怎么让页面适应不同的屏幕如何让样式适应不同的移动端

本文链接：https://blog.csdn.net/allWords/article/details/78410799

版权

java开发同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

移动端如何适应各种手机的分辨率呢

下面是我用Google Chrome浏览器的Iphone5显示的效果

当所有的数值都相同的时候

demo1.html效果如下：

demo.html的效果如下：

下面分别是demo1.html和demo.html的代码

demo1.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
    <title>Title</title>
    <style type="text/css">
        #div1{
            position: relative;
            height: 200px;
            width: 100%;
            border: 1px #ff7567 solid;
            background: #a9ff0d;
        }
        #div2{
            position: absolute;
            margin-left: 15%;
            font-size: 20px;
        }
        #div3{
            position: absolute;
            margin-left: 50%;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">姓名：z</div>
        <div id="div3">年龄：18</div>
    </div>
</body>
</html>

demo.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            position: relative;
            height: 2rem;
            width: 100%;
            border: 1px #ff7567 solid;
            background: #a9ff0d;
        }
        #div2{
            position: absolute;
            margin-left: 15%;
            font-size: 0.2rem;
        }
        #div3{
            position: absolute;
            margin-left: 50%;
            font-size: 0.2rem;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">姓名：z</div>
        <div id="div3">年龄：18</div>
    </div>
</body>
<script type="text/javascript">
    //1rem等于100px
    var docEl = document.documentElement,
    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                //设置根字体大小
                docEl.style.fontSize = 100 * (docEl.clientWidth / window.screen.width) + 'px';
            };
    //绑定浏览器缩放与加载时间
    window.addEventListener(resizeEvt, recalc, false);
    document.addEventListener('DOMContentLoaded', recalc, false);

</script>
</html>

自己可以把上面两个html分别运行一下，用不同的显示格式试试

allWords

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何让样式适应不同的移动端

移动端如何适应各种手机的分辨率呢下面是我用Google Chrome浏览器的Iphone5显示的效果当所有的数值都相同的时候demo1.html效果如下：demo.html的效果如下：下面分别是demo1.html和demo.html的代码demo1.html代码如下：html>html lang="en">h
复制链接

扫一扫