网站建设资讯

联系我们

相关推荐

网站建设资讯

首页 > 新闻动态 > 网站建设资讯 > >

响应式网站的设计技巧

发布日期:2017-08-24来源:www.cecom.cn

 ——关于响应式

  在移动互联网的大时代iOS 和 Android的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网

 

页设 计带来了新的挑战,我们无法估计用户的终端设备和网络状况,更不可能为每种设备都专门设计一套网站,如何实现网页在多终端设备中的适配呢?

  响应式,火火火火起来了!

  2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design",响应式网页设计提供了一种设计方法,可以使同一网站在智能手机、桌面电脑,以及介于这

 

两者 之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸,合理地为现有及将来的各种设备提最佳的浏览体验。

  Ethan Marcotte称响应式设计是基于网格建立一个网站。Marcotte定义这项技术后,网格引入网页设计,出现了很多CSS网格框架,几乎成了网页设计的标准。目的是让网页布局更合理,

           

 

 

 

信息 呈现更加美观易读,风格工整简洁,对前端开发来说,更加灵活与规范,在网页设计中的定义可以理解为以规则的网格阵列来指导和规范网页中的版面布局以及信息分布,这样做的好处

 

是给 予一种规范,令排版者可以较为方便的组织标题、列表、段落、图片等元素,保持版面元素之间的一致性。对“流体式”的响应式网站更是一个重要的设计规范。

  ——我对栅格的理解

  以前有很长一段时间,我一直搞不明白到底什么是栅格,首先我们必须要对栅格系统有一个基本的认知,关于栅格,栅格是由网格演变而来的另一种说法,都是一个意思——格子,所以

 

栅格 也没有多高深复杂,就是和小时候的作业本,方格本一样。作用之一也是异曲同工

  ——规范。将栅格视为一种秩序系统来进行使用,是网页设计师某种特定的精神和态度的表达,应为它体现设计师是以一种结构、逻辑的方式来进行构思和设计的。

  ——巧妙利用栅格化

  在网页设计中,如果把网页宽度平均切分为多个网格单元,每个单元之间预留一定的空隙,此时整个页面就如同一个栅格系统。标准的栅格系统中所包含的几个部分,分别是总宽w、列宽

 

c、 槽宽g、外边距m几个部分。这样总宽的公式如下:

  槽宽g=2*m

  总宽w=2m+N*c+(N-1)*g

  总宽w=g+N*c+(N-1)*g

  总宽w=N*c+N*g

  总宽w=N*(c+g)

  经过对响应式网站的了解和栅格的运用,对页面宽度选择,栅格列数间距的调整,进行初步内容规划排版,再按照实际情况对最终的稿作调整。可以大胆的在设计上尝试,大间距,文字

 

大小 的搭配,画面图形松紧,利用栅格设计出对画面更有节奏呼吸的排版,巧妙利用栅格,响应式网站更合理。


案例推荐: