zoukankan      html  css  js  c++  java
  • 前端开发之初探五

    1、图片格式

    1)jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )

    2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;

    3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

    4)webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下,webp格式图像的体积要比JPEG格式图像小40%

    5)apng:是一个基于PNG(Portable Network Graphics)的位图动画格式,Ios8已经支持,效果要比 gif 好。

    6)svg:矢量图形,SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。

    7)bmp:无损压缩,图质好,文件太大,不利于网络传输

    8)bpg:相比JPEG,它采用更高的压缩算法,在相同图像质量下,BPG文件大小只有JPEG的一半,或者说在相同体积文件下,BPG拥有更好的素质表现。另外BPG还原生支持8位和16位通道等等。

    图片整合的优势:

    1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度。

    2)通过整合图片来减小图片的体积。

    2、iconfont 

    线上工具:fontello、fontawesome、icomoon.io、iconfont.cn

    3、css 重置

    neat.css

    normalize.css


    Neat.css 是基于normalize的全新的 CSS Reset,兼容 IE 6+ 以及其他现代浏览器。

    normalize的核心理念是不盲目重置为0,让元素拥有统一的默认间距,大小等表现。但针对国内大部分网站不是纯文字排版,Neat.css 选择回归「有即是无,无即是有」的理念,把大部分标签的默认marginpadding 均重置为 0。如果你需要对大面积文字或者文档快速美化,推荐单独引入专门针对汉字排版的type.css。

    Neat.css 解决的问题

      解决Bug,特别是低级浏览器的常见Bug。

      统一效果,但不盲目追求重置为0。

      向后兼容。

      考虑响应式。

      考虑移动设备。

  • 相关阅读:
    剑指offer 顺时针打印矩阵
    剑指offer队列中的最大值
    固定顶部指定div不滑动
    调整圆环统计图格式
    补插一个MUI中UI组件示例地址
    统计图左右滑动
    mui集成百度ECharts的统计图表以及清空释放图表
    页面ajax自带的访问后台时,正在加载中
    js弹出div层内容(按回退键关闭div层及遮罩)
    地图经纬度定位不准
  • 原文地址:https://www.cnblogs.com/wmwPro/p/9093030.html
Copyright © 2011-2022 走看看