首页 > PHP资讯 > HTML5培训技术 > HTML5响应式 布局的设计 方法和响应式前端优化

HTML5响应式 布局的设计 方法和响应式前端优化

HTML5培训技术

作为一名优秀的web前端人员,不懂响 应式布局怎么可以呢? 今天跟大家分享web前端开 发和设计的干货:关于响应式布局的设计 方法和响应式前端优化。
  我们都知道,目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的显示器。
  所以,我们设 计的网页不能再按照1024的标准 来设计或者是前端重构了。再加上 现在移动互联网的趋势发展这么良好,错过移 动互联网这个平台是我们的最大损失。
  因为国 内众多电商网站还是门户网站,移动端的流量要大于pc端的。
  响应式 的核心优势在于设计者可以为所有设备使用同一种模板,只需要用CSS来定制 内容在各种大小屏幕上的呈现方式。
  一、3种响应 式布局的设计方法
  1、中心定位,两侧自适应
  这种方 法是将内容和视觉居中,而且把尺寸控制在1000px以内。左右两 侧就放一些辅助信息,让他们 根据屏幕宽度自适应即可。
  2、单侧定位,中心延伸展开
  这个方 法就是把主要的内容放在左侧。这是我 们阅读习惯所决定的,然后右 边放一些辅助信息。中间这 块是自适应屏幕宽度内容。
  3、腾讯称 为的小切糕全屏响应式设计。
  其实小 切糕全屏响应式设计算是瀑布流里面的一种。是根据 屏幕宽度进行计算,以一个 比较小的单元格微基础,然后以2倍,3倍,4倍等方式进行拓展,并计算 出最适合的完整组合。通常用 在图片信息展示页面。

  二、响应式 布局的组成和常用插件介绍
  (1)Media Query
  Media Query的主要 作用是根据不同的分辨率去调整一些不同的样式。由于目 前主流的移动设备都基于ios和Android,这两者 的自带浏览器都是webkit内核,因此我们可以使用viewport属性和Media Query技术实现响应式网页。通过这一方法,我们能 实现让基准字号font-size在不同 分辨率下显示不一样的内容。

  (2)Fluid grid
  Fluid grid也称流体布局,就是在PC端实现 的基础上将一些元素的狂傲由固定调整为弹性制的百分比或是字体比例等。使用Fluid grid的网站 能够根据屏幕宽度自动调整页面中每列的宽度,从而保 证页面始终处于完整展现的状态,并且实 现原有的基本功能。
  (3)Flex box
  Flex box是CSS3新添加 的一种模型属性,它的出 现有力的打破了我们常常使用的浮动布局、实现垂直等高、水平均分、按比例划分,可以实 现许多我们之前做不到的自适应布局。如果你希望网站能以webapp的外观 呈现在手机用户面前,那么,Flex box就是个不错的方式。Flex box和APP的结构很类似,头部底部全部固定,而中间 部分的高度实现自适应。
  10个免费的响应式布局HTML5+CSS3模板|最好的web前端资源
  HTML5响应式 布局网站模板下载,算是一 个响应式布局学习案例。

  (4)一套响应式布局HTML5网站网站模板下载-Wee

  三、响应式前端设计的优化。主要针 对用户体验的改进。
  (1)减轻Javascript库负载
  对于移动端来说,jQuery表现的太过厚重,而现在 针对移动端的状态来说,有jQuery Mobile、YUI、XUI等可供选择的框架。
  (2)减少HTTP请求次数
  移动端相比较PC端有一 个特殊的限制需要考虑到,就是用 户的网络流量是有限的。这时候 针对这些页面内部的部分操作,可以使用Ajax异步请求来完成,针对短 期内不会变化的一些数据,可以使 用服务器端缓存、前端缓 存等机制来保存这些数据,这样可 以减少用户一定的数据请求量。
  (3)Javascript和CSS需要尽量压缩
  把页面中使用的Javascript和CSS进行压 缩之后会有效地减少页面大小。
  (4)用CDN管理页面资源
  CDN的即内容分发网络,意在尽 可能避开互联网上有可能影响数据传输速度和稳定性的环节,使内容传输的更稳定。
  (5)列表图片实现“懒”加载
  移动终 端设备因为屏幕大小有限,没有必 要将全屏中的图片一次性加载完成,网页加载的同时,我们可 以选择逐个加载,当用户 进行滑动页面的时候,再继续加载图片。
  (6)图片显示的优化处理
  根据用 户设备的分辨率来加载不同分辨率下的不同图片,这样既 能给不同终端的用户一个很好的视觉体验,又不会 白白浪费用户的网络数据流量。

本文由欣才IT学院整理发布,未经许可,禁止转载。
友情链接:    本港彩票   麦乐迪棋牌   创远国际彩票   创远国际彩票   pc蛋蛋