1. 首页
  2. 公司建站
  3. 正文

响应式网页设计应该考虑哪些因素

  Ethan Marcotte最早提出响应式网页设计,Ethan Marcotte在AList Apart发表的一篇具有开创性意义的文章中,三种已有的开发技巧被他整合起来,命名为响应式网页。那么,建立响应式布局应该考虑哪些因素呢?

  一、浏览器

  首先要考虑到的是浏览器,浏览器是所有页面运行的环境,形象一点的说,网站是一个内容物,而浏览器是存放这个内容物的容器。所有的网页必需通过浏览器运行,因此进行网页设计的第一步就是了解浏览器,在pc端,常用的有5种浏览器,而手机上有浏览器功能的软件则有30种之多。但需要注意的是,许多浏览器并不能算作是一个完全独立的浏览器,很多都只是基于同一浏览器,尤其是安卓WebKit的不同版本而已。

  手机上有4种浏览器类型:内置浏览器,可下载浏览器,代理浏览器,以及WebView。由于目前安卓和IOS占据着移动端的大部分市场。因此,为了减少工作量,我们进行响应式网页布局设计的时候可以先保证安卓和IOS上面能运行,再根据实际情况和成本考虑是否适配其他的浏览器。

  二、视口

  响应式网站设计的另一个重点就是视口,视口的概念并不是我们所理解的设备的屏幕尺寸,屏幕尺寸是设备的物理显示区域。视口指的是浏览器窗口内的内容区域,但不包含标签栏,工具栏等,网页实际显示的区域就是视口。在桌面浏览器中,只有一个视口也就是浏览器窗口,在手机端中,有下面三个视口:

  1、布局视口:与移动端浏览器屏幕宽度不关联,仅限制CSS的布局。

  2、理想视口:一种对设备来说最理想的布局视口尺寸,由苹果公司最先引入,拥有最理想的浏览和阅读宽度。

  3、视觉视口:用户看到网站的区域,用户可以通过缩放来操作视觉视口。

  响应式布局最基础的工作,就是把布局视口的尺寸设置为理想视口。

  三、媒体查询

  所谓媒体查询其实就是CSS中的if语句,它让我们可以根据设备显示器的特性设置特定的CSS样式。通过合适的媒体查询,就可以很便捷的根据诸如设备属性来改变在页面内的内容的显示方式。

  真正的响应式设计方法从整体上颠覆了我们当前设计网页的方法,熟悉以上三个方面,意味着你已经有了设计响应式网站的基础,可以进行进一步学习了。

    延伸阅读

  • 怎样设计出创造性网页?

    我们经常浏览一些平常的网页的时候没什么感觉,而当我们看到比较创造性的,我们会觉得眼前一亮。是的,创造性的网页往往能给我们提供不一样的视觉效果和用户体验,那它们是怎样设计出来的呢...

  • 网站设计选择深色背景有什么好处?

    当我们制作企业网站的时候,首先会做网页的设计,而对设计影响比较大的就是网站整体的配色。那配色很多都是从背景色的选择开始的,常规的是白底色,比较舒服自然。而我们今天要探讨的是深色...

  • 设置企业网站首选的域名展现形式要注意什么?

    通常我们都是在主域名和二级域名之间做选择,也就是在带www和不带www的域名中做个选择。那么到底哪种更合适呢?大家都知道不带www的域名是顶级域名,一般搜索引擎给的网站权重会相...

  • 单页面网站到底应该怎样设计才会比较好呢?

    单页面网站,听起来只有一个页面设计起来要比企业站简单得多。但是实际上,你要在一个单页面展示所有的信息,然后还要考虑到怎样排版设计才能吸引用户的注意力和提高网站用户体验,是对设计...

  • 网站按钮设计要彰显个性化!

    网站按钮设计要彰显个性化!一、形状识别你希望你的按钮比较个性化,要做到这一点,你必须给按钮设计成一个可识别的形状。它应该从页面上的其他内容中脱颖而出,并立即被用户识别为可以与之...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://lnbdc.com/article/5141.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();