怎么做自适应网站设计?

2018-07-17 12:03:00 3467 2 编辑:深正互联 来源:互联网

基础的网页设计涵盖了几大重要环节:
前期的原型设计(工具: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条件语句,告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通