js教程

利用JavaScript判断页面宽度的响应式布局方法

我的站长站 2023-07-15 人阅读

分享一个我的站长站自用的响应式网站布局方法,非常简单好用。利用JavaScript判断页面宽度,结合rem单位, 实时修改网站尺寸,达到响应式布局方法。

首先前端开发中,样式尺寸单位全部用rem,比如:

.content{
width: 8rem;
border-radius: 0.15rem;
font-size: 0.95rem;
letter-spacing: 0.15rem;
}

接着页面中的html给个默认的font-size样式,比如:

<html style="font-size: 100px;">

或者

<style>
        html{font-size: 100px;}
    </style>

最后就是利用JavaScript判断页面宽度,实时修改html的font-size的大小。

    <script>
        const doc = document.documentElement
        window.onresize = () => {
            // 获取窗口宽度
            let width = doc.clientWidth
            // 设备宽度 / 设计稿宽度 = 根元素html大小 / 设计稿根元素大小(假设为100px)
            // 假设我们的设计稿宽度为 750px
            if (width >= 1080) {
                doc.style.fontSize = '100px'
            } else {
                doc.style.fontSize = width / 1080 * 100 + 'px'
            }
            console.log(width)
        }
    </script>

rem单位就可以随着html的font-size的大小自动修改大小,达到响应式布局的效果。

相关推荐
  • JS判断
  • 响应式教程
  • 简单的JS判断用户登录代码

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal...

    js教程 49 2年前
  • JS判断IE浏览器版本

    简单的原生JS判断IE浏览器版本var DEFAULT_VERSION = 8.0; var ua = navigator.userAgent.toLowerCase(); var isIE = ua.indexOf("msie")>-1; var safariVersion; if(isIE){ safariVersion = ua.match(/msie ([\d.]+)/)[1]; } if(safariVe...

    js教程 154 4年前
  • JS判断input file图片宽度完美兼容版

    判断input file图片宽度、大小最好的方法是用后端提交后来判断,但对应不会程序的朋友怎么办,门槛有点高。之前有分享过一次利用JS来判断input file图片宽度教程,但有个BUG,当第一次触发change方法判断true时,第二次input file随意选择一个都不会再次触发...

    js教程 151 4年前
  • 利用JavaScript判断页面宽度的响应式布局方法

    分享一个我的站长站自用的响应式网站布局方法,非常简单好用。利用JavaScript判断页面宽度,结合rem单位, 实时修改网站尺寸,达到响应式布局方法。首先前端开发中,样式尺寸单位全部用rem,比如:.content{width: 8rem;border-radius: 0.15rem;font-size: 0.95re...

    js教程 7 1年前
  • 中小企业制作响应式网站有何有优点?

    随着互联网时代不断的发展,网站是各大企业发展的必须品。但是随着近年来移动手机流行,移动端用户流量也是逐渐上涨,为了更好推广企业产品等,移动网站的制作也开始的大规模发展,由于网站不仅面向pc端,同时也是面向移动端,所以响应式网站成为众多企业的选择对...

    经验分享 219 5年前
  • 自适应与响应式网站建设的区别

    网站建设是对于一个新手来讲是一件繁琐累人的事情,首先你要考虑自己的网站用途是什么?如果自己做建设,你需要的知识是很多的,如C++、java、php、dreamweaver、photoshop、firework等等,一个网站不单单做出来,还是需要后期维护的。网站建设初期,对于无网页设...

    经验分享 251 4年前
最新更新