javascript怎么实现手机端rem自适应宽度为720像素

Posted 2023-05-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript怎么实现手机端rem自适应宽度为720像素相关的知识，希望对你有一定的参考价值。

参考技术A 首先要设置body的css样式，body font-size:62.5%;/*16px*62.5%=10px*/
if(screen.width==720)

divfont-size:1.4rem;

或者是用媒体查询
@media screen and (min-width:720px)
div font-size:1.4rem;

希望对你有帮助，望采纳！本回答被提问者采纳

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用

LESS代码：

.adaptive-circle {
    margin: 50px auto 0;
    width: 80%;
    height: 0;
    padding-top: 80%;

    border-radius: 100%;
    border: 1px solid #000;
    box-sizing: border-box; // for .layout { height: 100%; }

    position: relative;

    .layout {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;

        &.middle {
            &:before {
                display: inline-block;
                vertical-align: middle;

                content: ‘‘;
                height: 100%;
                width: 0;
                overflow: hidden;
            }
            div:first-child {
                display: inline-block;
                vertical-align: middle;
            }
        }
    }
}

View Code

CSS代码：

<style>
    .adaptive-circle {
        margin: 50px auto 0;
        width: 80%;
        height: 0;
        padding-top: 80%;

        border-radius: 100%;
        border: 1px solid #000;
        box-sizing: border-box;

        position: relative;
    }
    .adaptive-circle .layout {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    .adaptive-circle .layout.middle:before {
        display: inline-block;
        vertical-align: middle;

        content: ‘‘;
        height: 100%;
        width: 0;
        overflow: hidden;
    }
    .adaptive-circle .layout.middle div:first-child {
        display: inline-block;
        vertical-align: middle;
    }
</style>

HTML代码:

<div class="adaptive-circle">
    <div class="layout middle">
        <div>
            <h2>自适应标题</h2>
            <p>自适应结束</p>
        </div>
    </div>
</div>

完整demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) 博客园(杨君华)</title>
</head>

<style>
    .adaptive-circle {
        margin: 50px auto 0;
        width: 80%;
        height: 0;
        padding-top: 80%;

        border-radius: 100%;
        border: 1px solid #000;
        box-sizing: border-box;

        position: relative;
    }
    .adaptive-circle .layout {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    .adaptive-circle .layout.middle:before {
        display: inline-block;
        vertical-align: middle;

        content: ‘‘;
        height: 100%;
        width: 0;
        overflow: hidden;
    }
    .adaptive-circle .layout.middle div:first-child {
        display: inline-block;
        vertical-align: middle;
    }
</style>

<body>
    <div class="adaptive-circle">
        <div class="layout middle">
            <div>
                <h2>自适应标题</h2>
                <p>自适应介绍</p>
            </div>
        </div>
    </div>
</body>
</html>

View Code

示例链接：http://jsbin.com/wazovezima/edit?html,output

例图：

技术分享

PS:转载请注明出处，博客园(杨君华)

以上是关于javascript怎么实现手机端rem自适应宽度为720像素的主要内容，如果未能解决你的问题，请参考以下文章

Rem是如何实现自适应布局的？

px2rem 移动端自适应方案

0512日重点：淘宝的H5手机端自适应解决方案：Flexible

rem手机端页面自适应完美解决方案（最新）

rem 结合 scss 移动端自适应初级入门demo

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )