HTML页面是如何适应不同分辨率的显示器

Posted 2023-05-01

刚开始学html，有个问题，例如我的页面背景图的大小是设定好的，也就是说，我的页面大小是固定的，我的一些图片的大小也是固定的，那么在一些很大的显示器上浏览，会显得小，在一些很小的显示器上浏览，就会显得很大，会出现这种情况吗

HTML页面何适应不同分辨率的显示器可以通过：响应式布局、自适应网页设计等方法：

1、响应式布局设计：

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

2、自适应网页设计：

自适应网页设计（Adaptive Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

扩展资料：

响应式布局与自适应布局的区别：

1、自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。

3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

4、自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

参考资料来源：百度百科-响应式布局

参考资料来源：百度百科-自适应网页设计

参考技术A 这个不用管他！
虽然每个人的显示器有大有小， 但是，你感觉看起来会很大或者很小，只是一个视觉差而已！
各人看自己的显示器，习惯了就好！
当你看一个很大的东西，看习惯了之后， 然后再去看一个小的东西，你会觉得很小很小， 但多看几天， 你会觉得，其实也差不多， 这就是视觉差！
没必要刻意的去如何的来修正， 总之，习惯了就好！
你只要把你的html的总体宽度， 弄一个比较常规的尺寸即可！
一般是960或者950， 当然， 你也可以设置为满屏！
这是基于pc网站下， 如何你是做手机网站， 那一般都是满屏， 手机浏览的时候， 会自动适应手机屏幕的大小！ 参考技术B 你所说的适应，是一种响应式架构。采用Html5+css3可以完美的解决。不过你才学。不建议一开始就涉及到这种层次的问题。
你可以先把页面设置为1200px。居中。960的宽度已经过时了。现在主要是面向客户的思想去编写网站架构。主流显示器都在1200+，所以，我建议你宽度设置为1200px.事实也是如此。我们公司现在的宽度基本都定义1200px.做响应式的除外。
你说的图片是正常的。你站在地上，看掉在地上的一个硬币。会感觉还OK。是个硬币大小。但是你站在5楼在去看硬币，或许你就找不到硬币的位置了。同理。楼主不要纠结这些事了。本回答被提问者采纳 参考技术C HTML页面可采用自适应布局或者响应式布局。
自适应布局，使用百分比宽度来自适应屏幕大小。
响应式布局，使用CSS的@media规则，根据不用屏幕大小范围，编写多个CSS样式，来适应多种屏幕大小。 参考技术D 你所说的适应，是一种响应式架构。采用Html5+css3可以完美的解决。不过你才学。不建议一开始就涉及到这种层次的问题。
你可以先把页面设置为1200px。居中。960的宽度已经过时了。现在主要是面向客户的思想去编写网站架构。主流显示器都在1200+，所以，我建议你宽度设置为1200px.事实也是如此。我们公司现在的宽度基本都定义1200px.做响应式的除外。
你说的图片是正常的。你站在地上，看掉在地上的一个硬币。会感觉还OK。是个硬币大小。但是你站在5楼在去看硬币，或许你就找不到硬币的位置了。同理。楼主不要纠结这些事了。

前端页面高度和宽度自适应怎么做？

在前端页面开发中，我们会希望页面可以根据不同用户的显示比例自动缩放页面，确保用户体验，这就是PC自适应，下面小千就来给大家介绍一下应该怎么做和集中常见的问题解决方案，记得收藏起来遇到问题来看一看。

  自适应的优点：

  元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

  宽度自适应

  元素宽度设置为100%。（块元素宽度默认为100%），或者不设置宽度（width）;（宽度是父元素的宽度）

  高度自适应

  1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）

  2)元素高度自适应窗口高度，设置方法：html,body{height:100%;}

  注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有游戏高度。

  最小高度的自适应

  min-height属性：最小高度；(IE6浏览器不识别该属性)

  hack1:min-height:value;_height:valuewww.sangpi.com hack2:min-height:value; height:auto!important;height:value;

  浮动元素父元素高度自适应（高度塌陷）

  当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

  高度塌陷的解决方法

  hack1：给父元素添加声明overflow:hidden;(触发一个BFC)

  hack2: 在浮动元素下方添加空div,并给该元素添加

  声明：div{clear:both; height:0; overflow:hidden;}

  hack3:万能清除浮动法

1

  visibility:hidden/隐藏

  visibility:hidden;和display:none;的区别：

  visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

  伪对象选择符

  1）、::after : 与content属性一起使用，定义在对象后的内容。

  语法：选择符:：after{content:”文字”;}

  选择符:：after{content:url(图片路径)；}

  如：div::after{content:url(logo.jpg);}

  div::after{content:"文本内容";}

  2）、::before: 与content属性一起使用,定义在对象前的内容。

  div::before{content:"在其前放内容";}

  3）、::first-letter 定义对象内第一个字符的样式。

  说明：*(该伪元素只能用于块级元素)

  4）、::first-line:定义对象内第一行的样式。

  *(该伪元素只能用于块级元素。)

  以上就是关于前端页面宽高自适应的介绍了，希望能帮到大家。