web前端崔永键响应式项目-仿Toi

崔永健

2019.09.27

175人浏览

一周时间完成响应式布局,前期理解原理,通过媒体查询和百分比布局搭建,后期引入boostrap进行快速搭建

响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。

web前端崔永键响应式项目-仿Toi

web前端崔永键响应式项目-仿Toi

自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小,但仍然也算做差异。它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试和预测。但同时说难,这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中,你也会因此更好的掌握一些基础知识。当然,要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的,但是你至少可以很轻松的确定它是能够正常工作的,因为页面的基本特性和布局结构都是根据语义结构来部署的。

web前端崔永键响应式项目-仿Toi

web前端崔永键响应式项目-仿Toi

设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

Media Queries 是响应式设计的核心。

宽度需要使用百分比

处理图片缩放的方法

地址:http://geekart.top/toi/index.html

崔永健    546 天津市红桥区 设计师杨冰是女孩 1992.06.08
设计师啪啪网2019版