rem解决笔记本访问网站内容被放大的问题

dandan3年前程序开发2327

一般win系统的笔记本,出厂默认就是系统缩放150%,导致虽然分辨率是1920*1080,可浏览器的视口宽度却只有1200多,整个页面内容也被放大了,导致页面混乱。

mac m1笔记本也同样,分辨率不同,浏览的宽度只有1500多。 通过rem方式处理:


1. 增加meta标签,取消缩放(vue-cli 应该是改public/index.html,并且应该默认就有这个标签)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


2.定义设置html的font-size,定义为100px,然后按1920的设计稿来做,换算rem会比较直观,100px = 1rem

// 1920是设计稿的宽度,当大于1920时采用1920宽度,比例也是除以19.20
function setHtmlFontSize(){
    deviceWidth = document.documentElement.clientWidth > 1920 ? 1920 : document.documentElement.clientWidth
    document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.20 + 'px !important'
}

3. 添加窗口变化监听事件,让窗口变化后,也可以跟着变化,避免小窗口打开后,最大化,界面不变了

//addEventListener兼容性基本还可以
window.addEventListener('resize', function () {
      setHtmlFontSize()
  }, false)

//但是如果ie8及以下是没有这个方法的,如果要兼容,需要判断,不存在则使用attachEvent方法注册监听
function _addHandler(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler);
    } else {
        element['on' + type] = handler;
    }
}
_addHandler(window, 'resize', function() {
    setHtmlFontSize())
})

4. 如果每次写样式都要人为换算写rem比较麻烦,vscode中安装px2rem插件,并通过ctrl + , 然后搜索cssrem,找到基准font-size,默认是80px的基准,改成100,后续代码中,直接alt+z,会自动将文件内所有px单位转成rem


5、弊端: 一旦用了rem方式,那么,浏览器会拉的小了后,整个界面也会等比例缩放变小,导致有些元素会溢出、挤压,需要配合媒体查询来处理。 如果又不想做这么多的处理,让设计稿按1200px,居中显示,超出部分空白或固定背景,其实也可以。一般电脑的视口宽度都是超过1200的。


6.媒体查询建议数值:

@media (max-width: 576) {
  //只写pc端实际可不考虑
}
@media (min-width: 576) and (max-width: 768px) {
  //pad竖屏
}
@media (min-width: 768) and (max-width: 992px) {
  //pad横屏
}
@media (min-width: 992) and (max-width: 1200px) {
  //小屏幕的电脑
}
@media (min-width: 1200) and (max-width: 1400px) {
  //一般笔记本尺寸
}
@media(min-width: 1400px) {
  //正常电脑尺寸
}

//min和max都是包括数值的,但由于下面的属性会覆盖上面,所以如果下面有设置则会以下面写的为准。(或者边界值减1也行,比如< 576,577 - 768,769 - 992)


返回列表

上一篇:go相关踩坑

下一篇:go-zero安装

相关文章

centos后台运行程序

通过远程shell工具连上服务器,运行程序后,如果关闭工具,进程也会被结束。所以采用systemctl方式运行1、创建运行用户adduser newUserName2、编辑service脚本...

k8s学习

k3s学习环境安装,准备3台虚拟机,centos7.6以上操作每台机子都要执行,操作完成后,修改主机名hostnamectl set-hostname k8s-master...

go Imagick图片处理

使用前先需要安装ImageMagicMac环境brew install imagemagick #安装依赖(不确定装完上面会不会自动装) #尝试的时候发现依赖都装不上,把提示的...

wsl2安装docker+dify+xinference

1、wsl2安装ubuntu,这里指定版本安装一个新环境 wsl --install -d Ubuntu-22.042、安装完的ubuntu是在c盘的,放到其他...

宝塔ftp连不上

1、先检查端口是否有开放,涉及宝塔端口 和 云服务器的安全组;2、对Pure-ftpd的配置文件中,大概180来行的ForcePassiveIP  开放,并且把ip改成服务器的外网ip;...

go-zero中使用jaeger链路追踪

go-zero中使用jaeger链路追踪

链路追踪分两块:(1)框架内置的,通过配置实现,一般都在api、rpc等中间件中,粗浅理解是请求级;(2)自定义的,可以定义到函数里,粗浅理解可以自己写代码级的,也就是可以跟踪每个函数方法的执行时间;...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。