网站建设如何进行自适应网页设计

  手机上网固然便捷，但是(shì)對(duì)于网站(zhàn)设計(jì)师而言，却又得面临新的(de)难题：如何才能(néng)在不(bù)同(tóng)大(dà)小(xiǎo)的(de)设备上呈现同(tóng)樣(yàng)的(de)网页?手机和電(diàn)脑的(de)显示是(shì)有很大(dà)差别的(de)，以前用電(diàn)脑打开网站(zhàn)是(shì)很正常的(de)，但是(shì)很可(kě)能(néng)在手机上的(de)显示就非常的(de)不(bù)適(shì)于人阅读。 很多网站(zhàn)的(de)解决方法，是(shì)爲(wèi)不(bù)同(tóng)的(de)设备提(tí)供不(bù)同(tóng)的(de)网页，比如专门提(tí)供一个mobile版本，这樣(yàng)固然保证了(le)效果，但是(shì)比较麻烦，同(tóng)时要维护好几个版本，大(dà)大(dà)增加了(le)架构设計(jì)的(de)复杂度。

  “自適(shì)应网页设計(jì)”指可(kě)以自动识别屏(píng)幕宽度、并做出相应调整的(de)网页设計(jì)。 “自適(shì)应网页设計(jì)”到(dào)底是(shì)怎么做到(dào)的(de)? 首先，在网页代(dài)码的(de)头部，加入一行viewport元标签。 viewport是(shì)网页默(mò)认的(de)宽度和高度，上面这行代(dài)码的(de)意思是(shì)，网页宽度默(mò)认等于屏(píng)幕宽度(width=device-width)，原始縮(suō)放比例(initial-scale=1)爲(wèi)1。

  0，即网页初始大(dà)小(xiǎo)占屏(píng)幕面积的(de)100%。 由于网页會(huì)根(gēn)据屏(píng)幕宽度调整布局，所以不(bù)能(néng)使用绝對(duì)宽度的(de)布局，也(yě)不(bù)能(néng)使用具有绝對(duì)宽度的(de)元素(sù)。这一条非常重要。 “流动布局”的(de)含义是(shì)，各个区块的(de)位置都是(shì)浮动的(de)，不(bù)是(shì)固定不(bù)变的(de)。float的(de)好处是(shì)，如果宽度太小(xiǎo)，放不(bù)下兩(liǎng)个元素(sù)，后面的(de)元素(sù)會(huì)自动滚动到(dào)前面元素(sù)的(de)下方，不(bù)會(huì)在水平方向overflow(溢出)，避免了(le)水平滚动条的(de)出现。

   “自適(shì)应网页设計(jì)”的(de)核心，就是(shì)CSS3引入的(de)Media Query模块。它的(de)意思就是(shì)，自动探测屏(píng)幕宽度，然后加载相应的(de)CSS文(wén)件。同(tóng)一个CSS文(wén)件中，也(yě)可(kě)以根(gēn)据不(bù)同(tóng)的(de)屏(píng)幕分辨率，选择应用不(bù)同(tóng)的(de)CSS规则。 除了(le)布局和文(wén)本，”自適(shì)应网页设計(jì)”还必须实现图片的(de)自动縮(suō)放。

  有条件的(de)话，最好还是(shì)根(gēn)据不(bù)同(tóng)大(dà)小(xiǎo)的(de)屏(píng)幕，加载不(bù)同(tóng)分辨率的(de)图片。

本回答(dá)由提(tí)问者推荐。