领进前端门，修行在个人：一变应万变的响应式网页设计(1) - 基本环境、观念

基本环境建立

因为各个不同的手机有不同的宽度，如下图

如果要符合每个不同的解析度去做开发，会导致开发上非常困难，所以需要加入以下这段语法

<meta name="viewport" content="width=device-width,initial-scale=1">

width=device-width 强制将宽度转成载具宽度，让所有标籤不管是网页版或手机版都可以相同显示才能让使用者有更好的使用者体验

CSS中的reset - viewport

width=device-width 浏览器显示宽度 = 装置的宽度initial-scale=1 缩放比例为1

viewport的其他属性

Attribute name属性名称device-width画面宽度device-height画面高度initial-scale初始缩放比例minimum-scale最小可缩放比例maximum-scale最大可缩放比例user-scalable使用者是否可缩放

CSS3 Media Query观念

使用max-width语法时，应该将PC的语法放在上面，再由大到小至手机版语法
原理是因为越后面的语法会盖掉先前的语法
以下为max-width语法的写法

.title {  color: red;}// 当同时存在两个title名称时，第二个会覆盖第一个，所以这边title会显示为黑色，不会显示红色.title {  color: black;}// 当解析度变为768px时title会显示为蓝色@media(max-width: 768px) {   .title {    color: blue;  }}// 当解析度变为375px时title会显示为黄色@media(max-width: 375px) {   .title {    color: yellow;  }}

反之，使用min-width语法时，要由小到大，从手机版的语法再到PC版的语法唷！

浏览器内建模拟Mobile介面工具

在浏览器页面按下 滑鼠右键 > 检查
选择下图标示位置即可开启模拟Mobile介面工具

那响应式的前置作业在此告一段落，下一篇就正式进入响应式的世界啰！

问题与讨论

我也是前端的小菜鸟，所以要是有什么写得不好的地方，大师路过还请多给我一些指点，也请各位大师鞭小力点XD
如果你/妳已经是在前端上有一两年经验的，因本系列文章偏向前端入门，可能本系列文章不太适合你/妳，但也欢迎你/妳给予一些建议。