zoukankan      html  css  js  c++  java
  • 十款经典响应式网页设计案例欣赏[转CSDN]

    导读:一个固定格式设计的网页,在用屏幕大小不同的设备或不同浏览器打开时,是否会感觉“凌乱”呢?其实,解决 办法早已出现,响应式网页设计应运而生,它的理念是:页面的设计与开发应根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调 整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应 该有能力去自动响应用户的设备环境。

    试想一个应用场景,我母亲用她的上网本,我用的是普通笔记本电脑,我朋友则用的是27英寸屏的iMac,另外我和我的女友都有一个智能手机,女友的母亲还有一个iPad。所以目前的状况是,每个人使用的终端几乎都不一样。类似的场景几乎无处不在。

    网站内容会在各种不同的设备和浏览器中被浏览——对于设计者来说在动手设计网页之时就必需要铭记这一点。以下列出的10个国外站点均采用了响应式设计,一起来看看。

    一、Bread & Pepper

    Bread & Pepper是一家创建接口驱动程序的软件公司。

    点击这里进入该网页。

    二、UPPERDOG

    简洁的大窗口,会自动适应浏览器大小且无任何拖拽闪烁感,真不错。

    点击这里进入该网页。

    三、Food Sense

    网站的Logo会从页面顶端的中间位置弹出。

    点击这里进入该网页。

    四、Jux

    点击这里进入该网页。

    五、Endloop Mobile

    点击这里进入该网页。

    六、Gravitate

    点击这里进入该网页。

    七、Think Vitamin

    点击这里进入该网页。

    八、Clean Air Works

    点击这里进入该网页。

    九、CSS Grid

    点击这里进入该网页。

    十、Responsive Illustration

    点击这里进入该网页。

    社会日益增长的互联性使信息达到了令人震惊的传播速度,也使人们更紧密地结合在一起。但同时也带来了一些弊端,网站设计方式就是其中之一。

    任何一个拥有移动设备的人都知道要正常浏览网页有多么难,不过其实并非如此。越来越多的设计师正使用响应式设计技术,很快就会实践到每一个新的网站设计里啦!(编译/赵红)

    英文来自:thenextweb

  • 相关阅读:
    如何访问到静态的文件,如jpg,js,css?
    内存定位
    虚拟机逃逸
    OpenGL
    测试
    unity3d
    磁力链接
    IDA脚本
    投屏神器
    扫二维码登录
  • 原文地址:https://www.cnblogs.com/ddlzq/p/2335376.html
Copyright © 2011-2022 走看看