如何避免自己的HTML网页在别人电脑上变形

原创

已于 2022-08-12 13:17:34 修改

·

3.1k 阅读

·

3

·

14

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#css

#html

#前端

于 2022-08-12 13:15:29 首次发布

前端

同时被 2 个专栏收录

47 篇文章

订阅专栏

笔记

6 篇文章

订阅专栏

本文探讨了网页布局变形的常见原因，如未提前检查、浏览器默认设置差异等，并提出了有效的解决方案，包括使用自适应的大盒子布局、避免过度依赖绝对定位、通过CSS统一文字样式等。

● 变形的原因

○ 没有提前检查

○ 浏览器默认字体大小不同

○ 依据自己的页面设置的左右边距，没有考虑别人的显示屏大小

● 变形的解决方法

○ 设置一个大盒子，宽度100%，高度auto

○ 少用绝对定位的元素，他会搞乱你的页面

○ 所有文字性内容都要用css定义

○ 水平居中. margin: 0 auto;

○ 作为外部 wrapper 的 div 不要定死高度, 最好还加上overflow: hidden.以达到高度自适应.

○ min-width指定元素最小也不能小于某个宽度