我做的网页感觉在不同屏幕分辨率下显示效果不同,现在又什么好的办法解决这个问题没,能让网页自适应屏幕分辨率
并且布局保持不变 不管多大屏幕显示的是整个页面的放大或缩小之后的布局
我做的网页感觉在不同屏幕分辨率下显示效果不同,现在又什么好的办法解决这个问题没,能让网页自适应屏幕分辨率
并且布局保持不变 不管多大屏幕显示的是整个页面的放大或缩小之后的布局
2步
a:媒体查询中:
在媒体查询中使用em单位替代px单位,这能让文本缩放在必要时触发布局的变化;
避免媒体查询,使用百分比取代固定长度或用视口相关单位(vw,vh,vmin和vmax),他们的值解析为视体宽和高的%;
在较大分辨率下回去固定宽度,使用max-width,它可以适应较小分辨率无需媒体查询;
替换元素img,object,video,iframe设置max-width值为100%;
使背景图片完整铺满一个容器,不管尺寸如何变化,background-size:cover;
进行类似行列式式布局,使用flex布局解决;
在使用多列文本时,column-count用column-width替代可以在较小的屏幕上自动显示为单列布局
然后使用CSS3的媒体;
css的媒体查询功能就是做这个的。