美文网首页
pc端响应式js

pc端响应式js

作者: 瞳孔里的温柔你看得见不 | 来源:发表于2020-03-24 12:55 被阅读0次

/* 当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX时,1REM=100PX,如果要设定一个160PX(1920设计图时)的margin-top,那么REM设置值是1.6rem. */

(function(win) {

var tid;

function refreshRem() {

let designSize = 1920; // 设计图尺寸;

let html = document.documentElement;

let wW = html.clientWidth; // 窗口宽度

let rem = wW * 100 / designSize;

document.documentElement.style.fontSize = rem + 'px';

}

win.addEventListener('resize', function() {

clearTimeout(tid);

tid = setTimeout(refreshRem, 300);

}, false);

win.addEventListener('pageshow', function(e) {

if (e.persisted) {

clearTimeout(tid);

tid = setTimeout(refreshRem, 300);

}

}, false);

refreshRem();

})(window);

相关文章

  • pc端响应式js

    /* 当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX...

  • vue最新实战(和我一起学习vue吧)

    vue-todos 预览地址(响应式设计,pc端,移动端)首发地址(源码和教程) vue-todos是 todom...

  • 响应式页面

    我们俗称的响应式页面,既能再pc端显示也能在移动端显示,一般来说,pc端的页面相对于手机端来说,页面较为宽大,显示...

  • 常用响应式

    rem 通过设置不同屏幕尺寸html的font-size实现响应式PC端 移动端 vw/vh rem弊端:具有阶梯...

  • 响应式网站如何制作?需要注意些什么?

    响应式网站是现在最新的建站趋势,国外的网站已经基本上都响应式化了,而国内的网站基本上还停留在移动端网站与PC端网站...

  • html5移动端开发响应式屏幕适配

    1、响应式设计不仅用在移动网站,在PC端也有不同屏幕的适配,而且移动端和PC端可以只使用一套代码,这就是全平台的响...

  • 响应式第5天:视口

    响应式第5天-响应式手机网站制作 2、视口 定义:实际上,就是放置页面的容器,也就是html上面的标签。 在PC端...

  • @media响应式pc端屏幕分辨率适配

    1、以下几个宽度是我们比较常用的: 1024 1280 1366 1440 1680 1920 2、PC端响应式媒...

  • 综合

    现在pc端和移动端都有适应了,如果要pc和移动端都要的话,可以用js里面的 :js判断是移动端还是pc端,写两套吧...

  • 响应式博客首页

    预览地址:响应式博客首页 相应PC端各分辨率以及移动端的博客首页模版,用到了一些flex布局。

网友评论

      本文标题:pc端响应式js

      本文链接:https://www.haomeiwen.com/subject/fjdoyhtx.html