CSS如何在不同分辨率下完全定位计算机的位置一定要看！
有时，当我们编写页面时，我们会发现父元素的绝对位置相对定位。然而，在计算机的不同分辨率下，绝对位置仍然处于混乱状态。似乎父母的相对位置没有起作用。首先，我们应该理解以下原则：
1，笔记本电脑的分辨率一般在1366×768附近，PC机的分辨率一般为1920×1080；
以下是常用的计算机分辨率：
当写一个网页时，如果我们在1920个大分辨率下阅读同一个网页，然后用一个小分辨率的笔记本读同一页，我们会发现笔记本电脑基本上显示了大屏幕显示到1.5倍的网页显示效果。
2、为了显示网页在不同的分辨率下安全页面宽度，1920px宽度一般在网页上做的，应该有一个关于1200px，中心安全宽度，所有的内容写在盒子的宽度，如果有一个背景图像或轮播图必须有一套完整的页，必须设置为中心，所以当分辨率的背景图像或旗帜人物还原后，盒子的宽度约1200中仍然是有道理的，不会出现左右偏差。
小方框，如div在方框中，可以表示为百分比来实现页面自适应。
绝对定位的使用：
当绝对定位时，父元素必须记住为相对定位，所以在不同分辨率定位时不会混淆，但前提是父元素在一个安全的宽度内，如果父元素本身是一个会改变的，因为分辨率降低，定位元素就会跟着混沌。
在页面的布局结构，一些箱子的框架是必要的，如对1200px安全宽度的div。
例如，创建活动页面。本页的背景是一幅大图。在这幅大图片上，我们需要用一些小图来定位大图片，所以我们不能直接以大图片为背景。
相反，我们继续在大图片背景的div中设置一个安全的宽度div，并将其作为父元素相对定位，并为子元素设置绝对位置，这样在不同分辨率下不会出现绝对定位混淆问题。
通过总结用户体验，通过添加缩放属性，可以使页面按照不同的分辨率自动缩放到相应的区域，但是有一个bug，Firefox被杀不支持这个属性，这是用于转换：缩放（x，y）；属性也是拿来的。还有一个小问题。当页面加载缓慢时，刷新页面会显示放大效果，然后缩小到效果。它不会闪烁。尚未找到该解决方案。
缩放代码如下所示：
$（（）{ var函数W =屏幕分辨率的宽；var变焦= W / 1920；
$（#容器）。Css（{
缩放
-moz变换：规模（+变焦+）。
-moz变换原点：左上
}）；
}）；
缩放：当前屏幕分辨率宽度是 1920；
浏览器支持缩放属性：
结果是：除了Firefox，其他浏览器可以正常支持缩放属性，和整个块缩放页面需要适应当前的分辨率缩放效果，而变换：规模是有规模的页面显示放大后使用原始页面第一，减小相当于当前页面下降低影响，双方自然白。
PS：我认为缩放属性使用得很好，现在怎么不使用它，实际上Firefox是不支持的，而且很难找到解决方案。所以我们只能改变我们的代码结构，提高代码的严谨性。编写高效、高度兼容的代码是每个前端的职责，以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果你有任何疑问，你可以留言交流。谢谢您一直鼓励我。