投稿
  1. 小新网首页
  2. 投稿

响应式布局是什么（如何实现响应式布局）

活动推广 • • 投稿

1.什么是响应式布局？

响应式页面布局就是指网站不会随着终端的不同去变化，目的是解决移动端互联网浏览的问题，通俗的来说，就是一个html网站能兼容很多版本的手机和电脑等终端。

2.响应式布局举例1：

1）首先我们新建一个div标签，并设高度和背景颜色：

响应式布局是什么？怎么用？

响应式布局是什么？怎么用？

2）通过媒体查询控制页面的宽度：

①当页面宽度为小于768像素的时候，div的宽度100%显示：

响应式布局是什么？怎么用？

②当页面宽度为大于768像素的时候，div的宽度为750像素：

响应式布局是什么？怎么用？

③当页面宽度为大于992像素的时候，div的宽度为970像素：

响应式布局是什么？怎么用？

④当页面宽度为大于1200像素的时候，div的宽度为1170像素：

响应式布局是什么？怎么用？

3.响应式布局举例2：

①我们首先新建一个div标签，然后里面装着9个li标签：

响应式布局是什么？怎么用？

②我们设置父元素以及子元素的样式如下：

响应式布局是什么？怎么用？

③我们通过媒体查询来控制页面的宽度，当页面宽度小于768像素的时候，父元素宽度变化：

响应式布局是什么？怎么用？

本文来自作者:活动推广，不代表小新网立场！

转载请注明：https://www.xiaoxinys.cn/353445.html

赞 (0)
活动推广活动推广注册用户
0
上一篇 2022-12-29 17:30:00
下一篇 2022-12-29 17:39:00

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。