PC端 px自适应,类似于响应式(js,jq)

没有特别的幸运,那么就特别的努力!!!

我们常在开发中碰到一个问题
运用px像素开发,窗口大小会改变=>样式会变
解决方案:onresize 窗口事件(js)

onresize事件在窗口或者框架的大小发生改变的时候会被调用

1.下面我们主要介绍jq的用法

首先页面引用jq

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

其次编码 或者 把下面这串代码单独放一个文件(比如:common.js文件),其他页面引入就行

 $(function() {
    //全屏铺满
    var ratioX = $(window).width()/1920;
    var ratioY = $(window).height()/1080;
    		console.log("1=="+$(window).width())  //演示用
    		console.log("1=="+$(window).height())
    $("body").css({
        transform: "scale("+ratioX+","+ratioY+")",
        transformOrigin: "left top",
        backgroundSize: "100% 100%",
    });
   
});
//调整浏览器窗口全屏铺满
$(window, document).resize(function() {
    var ratioX = $(window).width()/1920;
    var ratioY = $(window).height()/1080;
    		console.log("1=="+$(window).width())  //演示用
    		console.log("1=="+$(window).height())
    $("body").css({
        transform: "scale("+ratioX+","+ratioY+")",
        transformOrigin: "left top",
        backgroundSize: "100% 100%",
    });
});
两种像素(物理像素,逻辑像素)

物理像素==>>设备屏幕实际拥有的像素点
逻辑像素==>>设备独立像素

设备像素比(Device Pixel Ratio, DPR):一个设备的物理像素与逻辑像素之比。

1px边框问题的解法千奇百怪,各显神通,但以我的实践经验,最推崇的方法还是利用CSS3的transform: scale,因为简单直接、适用性和兼容性好。

你不是给我两个物理像素点吗?加个transform: scale(0.5),只剩一个点了~

三个物理像素点?那就scale(0.33)!
scale(x,y) 对元素进行缩放 ======= 一个值表示等比缩放
在这里插入图片描述

拿着 不谢 请叫我“锤” 谢谢!!!

猜你喜欢

转载自blog.csdn.net/hammer1010/article/details/94746108