前端响应式

荧惑

已于 2022-10-31 08:58:04 修改

阅读量1.9k

点赞数 1

文章标签：前端 javascript css 开发语言

于 2022-10-29 16:31:04 首次发布

本文链接：https://blog.csdn.net/weixin_49602426/article/details/127588662

版权

本文介绍了前端响应式设计，旨在让网站在不同终端上都能自动适配。文章讲解了响应式的概念，以及如何通过百分比布局、媒体查询、rem、vw/vh和flex布局来实现响应式。各种方法各有优缺点，例如百分比布局实现简单但不适合复杂页面，媒体查询能实现不同分辨率效果但代码繁琐，而flex布局则提供了良好的布局适应性。

摘要由CSDN通过智能技术生成

文章目录

什么是响应式

总所周知，我们前端也被称为响应式web交互设计，那么什么是响应式呢？

响应式：响应不同屏幕设备合适地展现网页效果的方式或着手段。

举个栗子来说，就是我要苹果（PC页面）你就给我一个苹果（PC页面），我要梨子（移动端页面）你就不能再把那个苹果（PC页面）给我，而是给个梨子（移动端页面），虽然他们都是水果（页面）。

响应式web交互设计

响应式web交互设计就是为了一个网站能够兼容多个终端，页面能够自动适配显示器设备。

怎么实现响应式布局

1. 百分比布局

百分比布局就是把需要用到尺寸的都用百分比来写，这样没有具体的大小就能适配不同的屏幕

* {
   
    margin: 0;
    padding: 0;
}
        
html,
body {
   
    width: 100%;
    height: 100%;
    background-color: black;
}
        
.bfb {
   
    width: 50%;
    height: 50%;
    background-color: pink;
}