自顺应网页设想的观点和方式

相干保举

自顺应网页设想的观点和方式

　　跟着无线收集的进步，愈来愈多的人利用手机上彀。挪动装备正跨越桌面装备，成为拜候互联网的最罕见终端。因而，网页设想师不得不面临一个困难：若何能力在差别巨细的装备上显现一样的网页?本文将为大师先容顺应网页设想的观点和方式，接待浏览!

　　1、在HTML头部增添viewport标签。

　　在网站HTML文件的开首，增添viewport meta标签告知浏览器视口宽度即是装备屏幕宽度，且不停止初始缩放。代码以下：

　　这段代码撑持Chrome、Firefox、IE9以上的浏览器，但不撑持IE8和低于IE8的浏览器。

　　2、在CSS文件尾部增添针对差别屏幕分辩率的法则。

　　比方利用以下的代码，能够让屏幕宽度低于480像素的装备(如iPhone等)，网页侧栏埋没中部内容栏宽度主动调理。以下代码针对Z-Blog，WordPress相干标签称号只要点窜一下便可。

　　3、规划宽度利用绝对宽度。

　　网页整体框架能够利用绝对宽度，但往下的内容框架、侧栏等最好利用绝对宽度，如许针对差别分辩率停止点窜就便利。固然也能够不必绝对宽度，那就须要在 @media screen and (max-device-width: 480px) 外面增添各个div的针对小屏幕的宽度，现实上更费事。

　　4、页面利用绝对字体

　　在HTML页面上不要利用绝对字体(px)，而要利用绝对字体(em)，对大大都浏览器来讲，凡是用 em = px/16 换算，比方16px就即是1em。

　　按照下面报告的几点内容，我针对我博客的CSS停止了一些点窜，发明能够从iPhone手机浏览到休会更佳的页面，但有一个题目不处理，便是顶部导航栏navbar显现有题目，换行后被下面的文章挡住了，不晓得如何能更好地处理这个题目(更新：颠末网友提醒，在导航栏divNavbar的款式里，插手 overflow:hidden; 一行便可处理这个题目)。

　　相干浏览》》自顺应网页的特色

　　一、"自顺应网页设想"的观点

　　2010年，Ethan Marcotte提出了"自顺应网页设想"(Responsive Web Design)这个名词，指能够主动辨认屏幕宽度、并做出呼应调剂的网页设想。他建造了一个典范，外面是《福尔摩斯历险记》六个仆人公的头像。若是屏幕宽度大于1300像素，则6张图片并排在一行。若是屏幕宽度在600像素到1300像素之间，则6张图片分红两行。若是屏幕宽度在400像素以下，则6张图片分红三行。mediaqueri.es下面有更多如许的例子。这里另有一个测试小东西，能够在一张网页上，同时显现差别分辩率屏幕的测试结果，我保举装置。

　　二、自顺应网页设想的特色

　　1、许可网页宽度主动调剂

　　2、不利用绝对宽度

　　3、绝对巨细的字体

　　4、活动规划(fluid grid)

　　5、挑选加载CSS

　　6、CSS的@media法则

　　为甚么要利用自顺应网页设想?

　　咱们保举利用自顺应网页设想是由于它有很多上风：

　　利用单一网址，可以让用户更轻松地分享并链接到您的内容。

　　有助于 Google 的算法为网页精确地分派索引属性，无需标明存在对应的桌面版/挪动装备版网页。

　　须要较少的工程人力资本投入便可保护包罗不异内容的多个网页。