css响应式布局(媒体查询css响应式)

  响应式布局的实现

  响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局,能够在大屏设备以及小屏设备获得更好的浏览体验,简单来说就是页面适应终端而无需为每个终端制作单独的页面。

image.png

  媒体查询

  通过使用CSS媒体查询来实现响应式布局,针对不同的媒体类型设置不同的样式规则,可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。

  那么响应式布局的优点和缺点又有哪些呢?

  优点:1.面对不同分辨率设备灵活性强;

  2.能够快捷解决多设备显示适应问题;

  缺点:不能完全兼容所有浏览器,代码累赘,加载时间加长。

  说了这么多,可能还有很多人,不明白响应式布局该怎么去做,以及它的开发原理是什么?

  原理:简单点说响应式布局它是通过CSS中MediaQuery(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。


发表评论

评论列表

还没有评论,快来说点什么吧~