关于HTML分辨率适应问题,设置了@media screen and (max-width:1024x),好像没变化的样子?

关于HTML分辨率适应问题,设置了@media screen and (max-width:1024x),好像没变化的样子?,第1张

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

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

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

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

1、响应式布局设计:

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

2、自适应网页设计:

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

扩展资料:

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

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

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

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

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

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

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

你没有正确理解@media中min-width和max-width的意义,min-width表示最小宽度,所以min-width:600px 的意思是当屏幕尺寸大于600px时该条@media生效,要反着来理解!

举例:

body {background: blue}

@media only screen and (min-width: 600px) {

body {background: red}

}

上面的CSS代码,你猜PC浏览器最大化时背景是什么背景颜色?答案不是蓝色,而是红色!只有当宽度小于等于600px时,才会变成蓝色。所以你的代码得用 max-width 来代替 min-width


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8313067.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存