手机端自适应(rem使用)

最新推荐文章于 2024-01-04 16:27:07 发布

御神丶墨

最新推荐文章于 2024-01-04 16:27:07 发布

阅读量479

点赞数

分类专栏： CodeEra 文章标签： html 手机 rem 手机端自适应

本文链接：https://blog.csdn.net/myonly919/article/details/78087418

版权

CodeEra 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" style="font-size: 100px">
<head>
    <!--使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。-->
    <meta charset="UTF-8">
    <!--H5页面窗口自动调整到设备宽度，并禁止用户缩放页面-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--keywords用来告诉搜索引擎你网页的关键字是什么-->
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <!--description用来告诉搜索引擎你的网站主要内容-->
    <meta name="description" content="haorooms博客,html的meta总结，meta是html语言head区的一个辅助性标签。">
    <!--标注网页的作者-->
    <meta name="author" content="root,root@xxxx.com">
    <!--可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。-->
    <meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">
    <!--禁止浏览器从本地计算机的缓存中访问页面内容。-->
    <meta http-equiv="Pragma" content="no-cache">
    <!--忽略将页面中的数字识别为电话号码-->
    <meta name="format-detection" content="telephone=no"/>
    <!--忽略Android平台中对邮箱地址的识别-->
    <meta name="format-detection" content="email=no"/>
    <!--将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!--使用 <title> 标签定义HTML文档的标题-->
    <title>代码时代 CodeEra</title>
    <!--尺寸自适应-->
    <script>
        /*让文字和标签的大小随着屏幕的尺寸做变话 等比缩放*/
        var html = document.getElementsByTagName('html')[0];
        console.log(html);
        /*取到屏幕的宽度*/
        var width = window.innerWidth;
        console.log(width);
        /* 640 100  320 50 */
        var fontSize = 100 / 640/*640是设计图的尺寸*/ * width;
        console.log(fontSize);
        /*设置fontsize*/
        html.style.fontSize = fontSize + 'px';
        window.onresize = function () {
            var html = document.getElementsByTagName('html')[0];
            console.log(html);
            /*取到屏幕的宽度*/
            var width = window.innerWidth;
            console.log(width);
            /* 640 100  320 50 */
            var fontSize = 100 / 640 * width;
            console.log(fontSize);
            /*设置fontsize*/
            html.style.fontSize = fontSize + 'px';
        }
    </script>
    <!--<link> 标签定义了文档与外部资源之间的关系。
 <link> 标签通常用于链接到样式表:-->
    <!--<style> 标签定义了HTML文档的样式文件引用地址.
 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:-->
    <style>
        div {
            width: 2rem;
            height: 2rem;
            background-color: red;
            text-align: center;
            font-size: 0.5rem;
            line-height: 2rem;
            color: white;
        }

    </style>
</head>
<body>
<div>自适应</div>
<script language=JavaScript>
    document.write("最后更新时间: " + document.lastModified + "")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
</body>
</html>

御神丶墨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
手机端自适应(rem使用)

手机端自适应(rem使用)<!DOCTYPE html><html lang="en" style="font-size: 100px"><head>  <meta charset="UTF-8">  <meta
复制链接

扫一扫