30天打造品牌特色电商网站 Day.9 RWD响应式设计介绍

哈罗～很快的已经来到了第九天，前面带给大家都是一些网页的基础，後面会针对各种主题有更深入的探讨喔，今天要介绍的是响应式设计的设计重点，也是电商网站很需要重视的一部分！

什麽是响应式设计（RWD）呢？

它是一种网页的设计方法，目的是要让网页能够适应不同的平台，随着视窗宽窄的改变去调整网页的布局，不管是在电脑、平板、手机都可以很好的做呈现，给使用者优质的浏览体验。

该如何开始做响应式设计

1. 确定网页的用途、使用者族群，可以更好掌握哪种装置的使用者较多。
2. 订出几种版本的排版样式（电脑、平板、手机等）。
3. 确定好後开出对应尺寸的版面，以及考虑顺序。

开始做设计的顺序，一般建议从小萤幕（mobile）开始思考，以最小的范围开始做排版，把重要的资讯先放进去，之後在大萤幕（desktop）上再一步步把元素加进来，可以避免由大至小资讯量过多、排版过杂的问题。当然如果使用者主要会是在电脑上使用，那就考虑大萤幕多一点，如果主要是在行动装置上，就更着重於小萤幕上的设计。

媒体查询( media qurey )
媒体查询其实就是一个筛选器，你可以利用它来帮助你筛选不同的设备，去套上对应设备的样式，这边主要跟大家分享在CSS里面的用法。

主要写法有两种：由小到大＆由大到小

由小到大

• 优先考虑手机排版，再依序做平板、电脑
• ＠media 使用min-width写法

min-width的意思是指，当最小宽度 >(断点数字)px 时，就套用里面的 CSS 语法

@media(min-width: (断点数字)px){ 
 //条件下的样式设定
}

由大到小

• 优先考虑电脑排版，再依序做平板、手机
• ＠media 使用max-width写法

max-width的意思是指，当最大宽度 < (断点数字)px 时，就套用里面的 CSS 语法

@media(max-width: (断点数字)px) {
 //条件下的样式设定
}

常见的断点设置
以下是比较常见的断点，可以依个别需求去设置，只要满足主要的几个断点，其他比较针对特定设备的优化也可以先查询规格再去添加。

1. 针对於小型的行动装置 (<320px)
2. 针对於智慧型手机设置，宽度是小於480px (<480px)
3. 针对於高智能行动装置，比如Ipads，宽度是小於768px (<768px)
4. 针对於大设备，比如PC端，宽度是大於768px (>768px)
5. 添加适用於平板设备的断点，大於768px小於1024px (>768px 和 <1024px)
6. 针对於较宽的萤幕装置，大於1024px (>1024px)