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

html-css04

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

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

1、响应式布局设计:

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

2、自适应网页设计:

自适应网页设计(AdaptiveWebDesign)指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

扩展资料:

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

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

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

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

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

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

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

然而并不能固定。

分辨率由显示器决定。只能通过CSS来决定页面的宽度尺寸。

当你用1024*768的显示器时,你会发现页面很大。

但你用1920*1080的显示器时。就会发现页面变小了。

其实页面的尺寸还是一样的。变小是因为,你显示器变大了。

比如你CSS宽度设置成1000PX。那么1920*1080的显示器中就多出了920px,页面自然就小了。

H5并有有这一功能。你先要明白分辨率与尺寸的关系。

@media screen and (max-width:1024px)

{background-images:url(images/allbg2.png)}

这句话的意思是在屏幕可视窗口尺寸小于1024 像素的设备上修改背景图像,而不是更改电脑分辨率。屏幕分辨率是指屏幕可显示的最高像素数目,屏幕尺寸是指其面积。你可以通过浏览器调整其窗口大小,来观看是否有效果,希望对你有帮助,望采纳!