前端实现页面文字图片等大小随着屏幕像素变化自适应

最新推荐文章于 2024-07-24 23:00:08 发布

+一步之遥+

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量4.2k

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45596887/article/details/126943612

版权

本文介绍了如何在前端实现文字和图片大小随着屏幕像素变化自适应。通过将内容放入div并设置相应的样式，利用@media screen进行不同分辨率的样式调整。此外，还讨论了利用浏览器缩放布局来实现自适应的方法，为不同缩放比例定义像素区间以达到自适应效果。

摘要由CSDN通过智能技术生成

一：首先，文字写在div盒子里面（插值表达式内，data的return中含有syname对应的值）

<div class="logo-text-ui" id="sysnameShow">{
  { sysname }}</div>

其次，针对文字所在的盒子，有对应样式标签，有logo-text-ui类标签，内存放文字通用的div样式

.logo-text-ui {
  height: 100%;
  font-size: calc(100vw * 24 / 1920);
//此处省略其余样式。。。。。。
}

然后，针对常用的显示器像素进行划分，然后里面写对应的像素需要展示的样式以及样式值。用到@media screen。

新旧电脑常有的像素有：1024 768 1280 960 1360 768 1366 768 1400 1050 1440 900 1600 900 1680 1050 1920 1080等（现在最常用的就是1920*1080）

采用以下代码实现自适应：

@media screen and (min-width: 最小像素，闭区间) and (max-width: 最大像素开区间) {
  .div样式标签名 {
      //该屏幕处在像素对应要展示的样式
    font-size: 17px;
  }
}

二、投机取巧方式：

大家常用电脑显示都是1920*1080 ，当电脑处于

关注