什么是响应式设计?响应式设计的基本原理是什么?如何做?

响应式设计文章目录

    • 1、响应式设计
    • 2.基本原理
    • 3.实现方式
    • 4.总结
    • 5.响应式布局的优缺点

1、响应式设计

是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸,屏幕定向等)进行相应的响应和调整.

2.基本原理

通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport

3.实现方式

  • 媒体查询
  • 百分比
  • vw/vh
  • rem

4.总结

响应式设计的思考方向:

  • 弹性盒子和媒体查询
  • 使用百分比创建流式布局,同时使用媒体查询限制元素的尺寸和内容变更范围
  • 使用相对单位是内容自适应调节
  • 选择断点,针对不同断点实现不同的布局和内容展示

5.响应式布局的优缺点

优点:
面对不同分辨率,灵活性强
能够快捷解决多设备显示适应问题
缺点:
仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

你可能感兴趣的:(vue,前端,vue.js)