Ethan Marcotte最早提出响应式网站制作,Ethan Marcotte在AList Apart发表的一篇具备开创性意义的文章中,三种已有些开发方法被他整理起来,命名为响应式网页。那样,打造响应式布局应该考虑什么原因呢?
1、浏览器
第一要考虑到的是浏览器,浏览器是所有页面运行的环境,形象一点的说,网站是一个内容物,而浏览器是存放这个内容物的容器。所有些网页必需通过浏览器运行,因此进行网站制作的第一步就是知道浏览器,在pc端,常见的有5种浏览器,而手机上有浏览器功能的软件则有30种之多。但应该注意的是,很多浏览器并不可以算作是一个完全独立的浏览器,不少都只不过基于同一浏览器,特别是AndroidWebKit的不同版本而已。
手机上有4种浏览器种类:内置浏览器,可下载浏览器,代理浏览器,与WebView。因为现在Android和IOS占据着手机端的大多数市场。因此,为了降低工作量,大家进行响应式网站布局设计的时候可以先保证Android和IOS上面能运行,再依据实质状况和本钱考虑是不是适配其他的浏览器。
2、视口
响应式网站建设的另一个重点就是视口,视口的定义并非大家所理解的设施的屏幕尺寸,屏幕尺寸是设施的物理显示地区。视口指的是浏览器窗口内的内容地区,但不包括标签栏,工具栏等,网页实质显示的地区就是视口。在桌面浏览器中,只有一个视口也就是浏览器窗口,在手机端中,有下面三个视口:
1、布局视口:与手机端浏览器屏幕宽度不关联,仅限制CSS的布局。
2、理想视口:一种对设施来讲最佳的布局视口尺寸,由苹果公司最早引入,拥有最佳的浏览和阅读宽度。
3、视觉视口:用户看到网站的地区,用户可以通过缩放来操作视觉视口。
响应式布局最基础的工作,就是把布局视口的尺寸设置为理想视口。
3、媒体查看
所谓媒体查看其实就是CSS中的if语句,它让大家可以参考设施显示器的特质设置特定的CSS样式。通过适合的媒体查看,就能非常便捷的依据诸如设施属性来改变在页面内的内容的显示方法。
真的的响应式设计办法从整体上颠覆了大家目前制作网站的办法,熟知以上三个方面,意味着你已经有了设计响应式网站的基础,可以进行进一步学习了。
标签:响应式网站制作