响应式网页设计应该考虑那些因素
2022-01-05 254 作者:响应式网页怎么设计
字号:【小】【中】【大】
分享到:

  伊桑马科特首先提出了响应性网页设计。在伊桑马科特在《分离列表》上发表的一篇开创性文章中,他集成了三种现有的开发技术,并将其命名为响应网页。那么,建立响应式布局应该考虑哪些因素呢?


  一、浏览器


  首先要考虑的是浏览器,这是所有页面运行的环境。打个比方,网站就是一个内容,浏览器就是存储这个内容的容器。所有的网页都必须通过浏览器运行,所以网页设计的第一步就是了解浏览器。在pc端,常用的浏览器有5种,而手机上有浏览器功能的软件多达30种。但是需要注意的是,很多浏览器并不能算是完全独立的浏览器,很多只是基于同一个浏览器,尤其是不同版本的Android  WebKit。


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


  第二,视口


  响应型网站设计的另一个关键点是视口。视口的概念不是我们理解的设备的屏幕大小,而是设备的物理显示区域。视口是指浏览器窗口中的内容区域,但不包含选项卡、工具栏等。网页的实际显示区域是视口。在桌面浏览器中,只有一个视口,即浏览器窗口。在手机中,有以下三个视窗:


  1.布局视口:与手机浏览器的屏幕宽度无关,只是限制CSS的布局。


  2.理想视口:设备的理想布局视口尺寸,最早由苹果推出,具有最佳的浏览和阅读宽度。


  3.可视视口:当用户看到网站的区域时,可以缩放来操作可视视口。


  反应式布局最基本的工作是将布局视口的大小设置为理想视口。


  三.媒体调查


  所谓的媒体查询,其实就是CSS中的一个if语句,它允许我们根据设备监视器的特性设置特定的CSS样式。通过适当的媒体查询,可以很方便的根据设备属性改变页面中内容的显示方式,比如。


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


最新标签
最新更新
我要试用
验证码
奖励领取
验证码
Copyright© 2022天健世纪. All Rights Reserved. 蜀ICP备16016808号-1
×
快速定制通道
获取验证码
快速咨询