移动前端学习笔记（5）——响应式开发

最新推荐文章于 2024-04-30 23:00:09 发布

想成为大佬的鸭子

最新推荐文章于 2024-04-30 23:00:09 发布

阅读量258

点赞数

分类专栏：移动端文章标签：移动前端响应式开发媒体查询

本文链接：https://blog.csdn.net/weixin_41309331/article/details/98857675

版权

本文介绍了响应式开发的概念，旨在使网站适应不同设备的屏幕尺寸，提供良好的用户体验。主要内容包括响应式开发的原理——媒体查询，详细讲解了媒体查询的CSS语法、媒体类型和媒体功能，特别是min-width与min-device-width的区别，并提供了媒体查询的书写建议。

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

一、什么是响应式开发？

现在的设备（特别是移动设备），各种尺寸层出不穷，一个能在PC端完美展示的站点，放在移动端可能就会“形象坍塌”。响应式开发应运而生，它说白了就是做出来一个网站，可以兼容不同大小的设备（这里说的大小更多指的是设备的宽度），可以通过“媒体查询”检测设备信息，来设置不同的CSS样式，决定不同的网页布局方式。总而言之，就是为了用户体验，让网站对不同设备做出不同响应。

二、网页布局方式

在开发中，我们常用到以下的一些网页的布局方式：（几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。）

固定宽度布局	为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
流式布局	为网页设置一个相对的宽度，通常以百分比做为长度单位。
栅格化布局	将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
响应式布局	通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。