HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题

最新推荐文章于 2024-06-26 14:36:44 发布
最新推荐文章于 2024-06-26 14:36:44 发布
阅读量1.6w 收藏 27
点赞数 6
分类专栏： HTML+CSS网页设计
版权声明：王迪
本文链接：https://blog.csdn.net/dnruanjian/article/details/85336448
版权
本文探讨了同一HTML页面在不同电脑上显示效果不同的原因，主要归因于分辨率差异。提出了四种解决方案：固定宽度布局、百分比自适应布局、按分辨率加载不同CSS文件和响应式布局。建议在CSS样式较多时使用外部样式表，统一管理和调整。
摘要由CSDN通过智能技术生成

表象问题：同一个HTML页面，在不同电脑上的显示效果不一样。（样式错位等）

举例说明：当电脑分辨率不同时，第二张图片的样式无法完全展示。

       

 

 

问题分析：由于电脑屏幕分辨率不同，像素密度不同，视觉上会有差异，甚至差异很大。

参考资料：百度流量统计院 分辨率使用情况：http://tongji.baidu.

了解本专栏 订阅专栏 解锁全文 超级会员免费看
逍遥小丸子
关注
专栏目录
订阅专栏
html+css+js基础问答
qq_43751465的博客
08-26 5231
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
如何让网页自适应电脑屏幕分辨率
Qcherlsh的博客
07-26 5448
很多人会遇到这样的问题，当你在自己的电脑上精心制作好网页，却发现在别人的不同分辨率的电脑上浏览你的页面时，自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率。 目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给
如何使网页自适应电脑屏幕分辨率?
热门推荐
Luqing的专栏
07-05 13万+
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。 　　第一种方法：做一个网页解决问题（长了点） 　　如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们
css-适配不通屏幕分辨率
最新发布
聆听。。花开雨落的博客
06-26 164
【代码】css-适配不通屏幕分辨率。
html在不同电脑上排版不一样怎么办_认识html：实现网站页面是这么简单的一回事...
weixin_39892615的博客
10-28 1805
互联网时代人们通过上网浏览信息，打开浏览器上网看到丰富的图文、视频、音乐等多媒体信息，一系列信息反馈和视觉冲击之后，您有没有想过，互联网这么发达的时代，您觉得花一点点时间学会做个网站页面不真香？概念须知：超文本标记语言“超文本标记语言“(HTML)作为文档信息载体。当我们用html创建文档时，它将我们的语言转换成计算机可以理解的语言。这使得计算机能执行特定任务至关重要。人与计算机交互，需要一套编...
html在不同电脑上排版不一样怎么办_HTML有哪些作用 HTML标准版本历史介绍【图文】...
weixin_39624774的博客
12-01 562
　　HTML,HTML标准有哪些?　　HTML是一种用来网页制作的简单标记语言。但它并不是一种程序语言，它只是一种排版网页中资料显示的结构语言，易学易懂，非常简单。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX，WINDOWS等)。html文档通过浏览器可以表现出文本、图片、声音、链接等的内容。使文章的内容更更丰富。　　HTML出现后，由于表现形式灵活并具有超级...
html两台电脑排版不一样,为什么同一个word文档在两台电脑上打开里面的格式不一样...
weixin_28965731的博客
07-14 1223
为什么同一个word文档在两台电脑上打开里面的格式不一样以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！为什么同一个word文档在两台电脑上打开里面的格式不一样word的版本不一样，他的可能是word 2003.你的可能是word xp.版本不一样，打开后处理出来的结果也不一样。解决办法：把两台电脑的word用同一个安装...
html怎么设置桌面背景图片,在css里如何让背景图片在不同的屏幕上都完全显示出来，怎么设置百分比...
weixin_33734005的博客
06-02 265
可以使用：Background-size属性语法：background-size：[|| auto ]{1,2} | cover | contain取值：：由浮点数字和单位标识符组成的长度值。不可为负值。：取值为0%到100%之间的值。不可为负值。说明：设置背景图片的大小。指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-orig...
相同源代码的html文件在本地和服务器端被浏览器请求时，显示的效果不一样！！！...
weixin_30615767的博客
02-03 1091
用Tomcat服务器写html时，用IE查看发现和之前在本地调试好的样式不一样。。。源代码完全相同啊啊啊啊啊。 最后才搜索到一个解决方案： 加入： <span style="font-size:14px;"><meta http-equiv="X-UA-Compatible" content="IE=edge" /></span> ...
红色婚恋交友专题响应式手机网站模板- 响应式 手机 单页 跳转 专题 html5 幻灯 瀑布流.rar
11-13
这意味着它能够根据用户的设备类型（如手机、平板或桌面电脑）自动调整布局，保证在不同屏幕尺寸下的视觉效果和功能性。响应式设计通常通过使用CSS3媒体查询来实现，以适应不同分辨率的设备。 2. **HTML5**：作为...
CSS基础（新手入门教程）
m0_61225117的博客
10-26 3587
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
前端面试-CSS
wanglu458512的博客
09-19 2987
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
css一招解决不同浏览器页面错位
Warren专栏
05-02 4410
用CSS+div来写网站代码的好处显而易见，这里不多说了，但由于不同浏览器对css的解释不统一，造成不同浏览器下页面错位的现象十分常见…… 页面乱的原因是因为ie6认为一个div超宽了，所以把本应float;right的div挤了下去。而如果设置为ie6下显示正常的宽度，则在ie7和firefox下看页面就会少了一块一样，也很别扭….  怎么办？用css hack 来改写css代码 改写
如何让Html页面在不同的设备自适应布局
qq_61820657的博客
09-11 3905
关于页面的布局
html 字号和像素的关系,像素与分辨率的关系
weixin_39816062的博客
05-30 545
像素与分辨率的关系像素即px，是画面中最小的点(单位色块)。像素的大小是没有固定长度值的，不同设备上1个单位像素色块的大小是不一样的。分辨率=画面水平方向的像素值 * 画面垂直方向的像素值。分辨率可以分为两方面：屏幕分辨率和图像分辨率。1. 屏幕分辨率：例如，屏幕分辨率是1024×768，也就是说设备屏幕的水平方向上有1024个像素点，垂直方向上有768个像素点。像素的大小是没有固定长度的，不同设...
jQuery+CSS+HTML实战：创建动态页面遮罩弹出框
`#fullbg` 设置了半透明的灰色背景，使其在页面上形成一个遮罩效果。对话框`#dialog` 则设置了固定的宽度和高度，圆角边框以及透明度，使其在遮罩背景下清晰可见。 当用户点击链接后，JavaScript控制`showBg()`函数...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逍遥小丸子

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值