基础的网页设计涵盖了几大重要环节：
前期的原型设计（工具：Axure，Mockplus）
UX设计(工具：Justinmind）
UI设计（工具：Sketch）
后期的前后端，HTML,CSS, JS.
而做好自适应网页设计则需要遵循以下几个步骤：
Step 1：Meta 标签
为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一般会大于屏幕宽度），你可以使用
viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且
不进行初始缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Step 2. HTML结构
在这个例子中，页面布局包括 Header, Content, Sidebar和Footer. Header固定高度为180px, Content宽600px,
Sidebar宽300px。
Step 3. Media Queries
CSS3 media query是自适应网页设计的关键，就像高级语言里的if条件语句，告诉浏览器根据不同的视口宽度（这里等于浏览器宽度）来渲染网页。
本文均为荣益互联摘自权威资料，书籍，文章，或来自网络，如有版权纠纷或违规问题，请联系我们删除。我们欢迎您的分享，谢绝直接抄袭复制。感谢…
