怎么做自适应网站设计?
发布时间:2018-08-21

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