着力选取,移动端自适应方案

2019-10-06 07:57栏目:真实赌钱游戏网站
TAG:

indexedDB 基本使用

2017/12/14 · 基础本事 · 1 评论 · IndexedDB

初稿出处: 党黎明   


indexedDB简介:

indexedDB 是一种采纳浏览器存款和储蓄多量多少的方法.它成立的数额能够被询问,何况能够离线使用.

 

indexedDB 有以下特征:

  1. indexedDBWebSQL 数据库的代替品
  2. indexedDB遵从同源合同(只可以访谈同域中积累的多寡,而不能访谈别的域的)
  3. API包含异步API同步API二种:非常多情状下使用异步API; 同步API必须同 WebWorkers 一齐使用, 近年来从未浏览器援救同步API
  4. indexedDB 是工作形式的数据库, 使用 key-value 键值对储存数据
  5. indexedDB 不应用结构化查询语言(SQL). 它经过索引(index)所发出的指针(cursor)来成功查询操作

削减HTTP供给(大型网址优化才具)

2015/11/26 · HTML5 · HTTP

初稿出处: Kelly   

在网址开拓过程中,对于页面包车型地铁加载作用平时都想尽办法求快。那么,怎么让工夫越来越快啊?裁减页面须求 是三个优化页面加载速度很好的点子。上一篇博文我们讲课了 “利用将小Logo合成一张背景图来减弱HTTP诉求”,那么,这一篇博文将执教  “ 将图纸转成二进制并生成Base64编码,能够在网页中通过url查看图片”。

一、为啥采纳将图片转成二进制并生成Base64编码,能够在网页中经过url查看图片的主意减弱HTTP须求数?

干什么小编会讲授“将图纸转成二进制并生成Base64编码,能够在网页中通过url查看图片” 这一种情势来压缩HTTP央求,进而优化页面吗?这里呢,是涉嫌到活动端的Logo使用。上一篇博文所讲的点子是不是使用于手提式无线电话机端的网页呢?

而是,它会出现三个难题:背景图+css展现Logo时,Logo本人不大概缩放,例如背景图中64px*64px的Logo,展现到分界面时必得安装icon的分寸也是64*64。在PC网页中那平日不会有怎样难题,但在移动端设备上就全盘不行。一样是4英寸的手机荧屏,其分辨率有十分的大希望是320*400,也说不定是640*800,以致也恐怕是1917*1080。这样64px*64px的Logo在差异的配备上看起来的大大小小就能够距离极度刚烈。

幸亏的是,手提式有线电话机上的浏览器基本对此做了优化,会把器材模拟成更低的分辨率。比方在1136*640的IPHONE 5中获取$(window).width(),抽出来的是320并不是640,那样三个宽度为160px的图样占用的是显示器宽度的六分之三,实际不是50%。手提式有线话机配备这么管理是为了减轻包容性难题。除了网页,包涵手提式无线电话机上app的界面,在retina显示屏上和非retina荧屏上的尺寸是完全同样的,都以因为对分辨率做了拍卖。

唯独,移动设备这么的管理格局并不能够一心减轻难点,因为机器的假使性预计在相当多时候是不稳妥的,尤其是在android设备中。为了越来越好地调控作而成分呈现的轻重缓急,解决的主意正是用pt取代ps,px是对应显示器的分辨率,而pt是指向人眼睛实在以为的分寸,无论在何种分辨率的装置上,72pt固定是1英寸。

HTML的img标签成分的src属性不只是能够钦点url,也可以钦点图片的二进制数据流。然后经过img成分的机动缩放效用,钦命img的深浅,就能够达成在分歧分辨率的装置上出示同一的Logo大小。

二、使用Base64编码减少页面央求数

当大家的贰个页面中要传播非常多图纸时,特别是有的小Logo,十几K、几K,乃至是字节品级大小的小Logo,这么些小Logo都会追加HTTP诉求,即使多了,就能给服务器带来比异常的大的压力。比如要下载一些一两K大的小Logo,其实诉求时带上的附加音讯有望比Logo的尺寸还要大。所以,在伸手更加的多时,在网络传输的多少自然就越来越多了,传输的多少自然也就变慢了。而这里,大家运用Base64的编码格局将图纸直接嵌入到网页中,实际不是从外界载入,那样就减弱了HTTP央浼。当然了,它有二个小缺欠,就是使当前页面包车型地铁分寸变大了(对于优化来讲,其实那些能够忽略,影响一丝一毫)。看一下下图,小Logo大小为2.4k,等待响应时间是14ms,而接受多少,也正是下载时间约为0ms;总之,在有大批量小Logo下载的时候,那样的措施去优化能大大升高网址的习性(在jquery mobile和天猫商号的手提式无线电话机站下面都有用到此本领)。

真实赌钱游戏平台网站 1

三、开辟思路

将小Logo放在以icon_起来的公文夹里(以界别不用生成base64的图纸的文件夹)—>用程序去遍历文件夹图片 —>将每张图纸的base64编码放在一个js对象里—>在HTML页面包车型大巴img标签里 使用品质 icon-data = ‘Logo名(不带后缀)’来彰显图片 —> JS文件写二个函数对icon-data属性举办调换,调换到src属性,然后值就透过icon-data的属性值获得图标名,然后开展对应的更迭得到相应Logo的base64编码 —> 显示图片

四、代码完结

XHTML

<?php $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']); define('ROOT', $pathinfo['dirname']); function generateIcon_mobile() { $imgRoot = ROOT."/img/mobile"; $iterator = new DirectoryIterator($imgRoot); foreach ($iterator as $file) { if ($file->isDot()) continue; $filename = $file->getFilename(); //识别出是或不是以icon_始于的文书夹,要是是,则对此文件夹的Logo进行base64编码管理if ($file->isDir() && 0 === strncasecmp('icon_', $filename, 5)) { generateIconMobileCallback("$imgRoot/$filename", ROOT."/js/mobile"); } } } function generateIconMobileCallback($iconDir, $styleSaveDir) { //保存成js的文本名 $saveName = array_pop(explode('/', $iconDir)); //JS文件保留路线 $styleSavePath = $styleSaveDir.'/'.$saveName.'.js'; //将当前目录下的装有文件及MD5组成三个识别字符串 $fileMap = array(); $iterator = new DirectoryIterator($iconDir); foreach ($iterator as $file) { if ($file->isDot()) continue; $fileName = $file->getFilename(); if ($file->isDir()) { generateIconMobileCallback($iconDir.'/'.$fileName, $styleSaveDir.'/'.$fileName); } else { $fileMap[$fileName] = md5_file($file->getRealPath()); } } ksort($fileMap); $fileMapStr = json_encode($fileMap); //确定保障目录可写 ensure_writable_dir($styleSaveDir); //js文件句柄 $wirteHandle = fopen($styleSavePath, 'w'); //当前小Logo文件夹的相对路线$iconSaveRelative = substr($iconDir, strlen(ROOT)); //写入,开头化保存数据的目的 fwrite($wirteHandle, "/** icon in dir: $iconSaveRelative/ */ nif(typeof($iconData) == 'undefined') $iconData={};"); foreach ($fileMap as $fileName => $md5) { //当前图片的相对路线 $fullPathName = "$iconDir/$fileName"; //猎取路线消息 $pathInfo = pathinfo($fullPathName); //获得文件名(未有后缀) $fileNameNoExt = $pathInfo['filename']; //取得图片音信 $imageSize = getimagesize($fullPathName); //获得文件的后缀 switch ($imageSize[2]) { case IMAGETYPE_GIF: $imageType = 'gif'; break; case IMAGETYPE_JPEG: $imageType = 'jpg'; break; case IMAGETYPE_PNG: $imageType = 'png'; break; default: $imageType = 'jpg'; break; } //获得图片能源 $readHandle = fopen($fullPathName, 'r'); //将图片转成二进制并生成Base64编码 $base64 = base64_encode(fread($readHandle, filesize($fullPathName))); //关闭财富fclose($readHandle); //将Base64编码写入js文件中 fwrite($wirteHandle, "n$iconData.$fileNameNoExt="data:image/$imageType;base64,$base64";"); } //最终换个行 fwrite($wirteHandle, "n"); //关闭资源fclose($wirteHandle); //管理成功的Logo文件夹给予提醒 echo '<p>'.$iconSaveRelative. ' saved</p>'; } /** * 确定保障文件夹存在并可写 * * @param string $dir */ function ensure_writable_dir($dir) { if(!file_exists($dir)) { mkdir($dir, 0766, true); @chmod($dir, 0766); @chmod($dir, 0777); } else if(!is_writable($dir)) { @chmod($dir, 0766); @chmod($dir, 0777); if(!@is_writable($dir)) { throw new BusinessLogicException("目录不可写", $dir); } } } generateIcon_mobile(); ?> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <br> <br> <br> <div>大家直接引入所生成的js文件,测量试验一下是不是中标</div> <br> <div>直接在img标签里投入 icon-data = 'Logo文件名' 举例<img icon-data="tryit">,查看效果</div> <br> <br> <br> <img icon-data="tryit"> <script src="js/mobile/icon_pink.js"></script> <script src="js/mobile/jquery.all.min.js"></script> <script src="js/mobile/attrHandle.js"></script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<?php
    $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']);
    define('ROOT', $pathinfo['dirname']);
 
    function generateIcon_mobile() {
        $imgRoot = ROOT."/img/mobile";
        $iterator = new DirectoryIterator($imgRoot);
        foreach ($iterator as $file) {
            if ($file->isDot()) continue;
            $filename = $file->getFilename();
 
            //识别出是否以icon_开头的文件夹,如果是,则对此文件夹的图标进行base64编码处理
            if ($file->isDir() && 0 === strncasecmp('icon_', $filename, 5)) {
                generateIconMobileCallback("$imgRoot/$filename", ROOT."/js/mobile");
            }
        }
 
    }
 
    function generateIconMobileCallback($iconDir, $styleSaveDir) {
        //保存成js的文件名
        $saveName = array_pop(explode('/', $iconDir));
        //JS文件保存路径
        $styleSavePath = $styleSaveDir.'/'.$saveName.'.js';
 
        //将当前目录下的所有文件及MD5组成一个识别字符串
        $fileMap = array();
        $iterator = new DirectoryIterator($iconDir);
        foreach ($iterator as $file) {
            if ($file->isDot()) continue;
            $fileName = $file->getFilename();
            if ($file->isDir()) {
                generateIconMobileCallback($iconDir.'/'.$fileName, $styleSaveDir.'/'.$fileName);
            } else {
                $fileMap[$fileName] = md5_file($file->getRealPath());
            }
        }
        ksort($fileMap);
        $fileMapStr = json_encode($fileMap);
 
        //确保目录可写
        ensure_writable_dir($styleSaveDir);
 
        //js文件句柄
        $wirteHandle = fopen($styleSavePath, 'w');
        //当前小图标文件夹的相对路径
        $iconSaveRelative = substr($iconDir, strlen(ROOT));
        //写入,初始化保存数据的对象
        fwrite($wirteHandle, "/** icon in dir: $iconSaveRelative/ */ nif(typeof($iconData) == 'undefined') $iconData={};");
        foreach ($fileMap as $fileName => $md5) {
            //当前图片的绝对路径
            $fullPathName = "$iconDir/$fileName";
            //取得路径信息
            $pathInfo = pathinfo($fullPathName);
            //取得文件名(没有后缀)
            $fileNameNoExt = $pathInfo['filename'];
            //取得图片信息
            $imageSize = getimagesize($fullPathName);
 
            //取得文件的后缀
            switch ($imageSize[2]) {
                case IMAGETYPE_GIF:
                    $imageType = 'gif';
                    break;
                case IMAGETYPE_JPEG:
                    $imageType = 'jpg';
                    break;
                case IMAGETYPE_PNG:
                    $imageType = 'png';
                    break;
 
                default:
                    $imageType = 'jpg';
                    break;
            }
 
            //取得图片资源
            $readHandle = fopen($fullPathName, 'r');
            //将图片转成二进制并生成Base64编码
            $base64 = base64_encode(fread($readHandle, filesize($fullPathName)));
            //关闭资源
            fclose($readHandle);
            //将Base64编码写入js文件中
            fwrite($wirteHandle, "n$iconData.$fileNameNoExt="data:image/$imageType;base64,$base64";");
        }
        //最后换个行
        fwrite($wirteHandle, "n");
        //关闭资源
        fclose($wirteHandle);
 
        //处理成功的图标文件夹给予提示
        echo '<p>'.$iconSaveRelative. ' saved</p>';  
    }
 
    /**
    * 确保文件夹存在并可写
    *
    * @param string $dir
    */
    function ensure_writable_dir($dir) {
        if(!file_exists($dir)) {
            mkdir($dir, 0766, true);
            @chmod($dir, 0766);
            @chmod($dir, 0777);
        }
        else if(!is_writable($dir)) {
            @chmod($dir, 0766);
            @chmod($dir, 0777);
            if(!@is_writable($dir)) {
                throw new BusinessLogicException("目录不可写", $dir);
            }
        }
    }
    generateIcon_mobile();
?>
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<br>
<br>
<br>
 
<div>我们直接引入所生成的js文件,测试一下是否成功</div>
<br>
<div>直接在img标签里加入 icon-data = '图标文件名'  例如  <img icon-data="tryit">,查看效果</div>
<br>
<br>
<br>
    <img icon-data="tryit">
    <script src="js/mobile/icon_pink.js"></script>
    <script src="js/mobile/jquery.all.min.js"></script>
    <script src="js/mobile/attrHandle.js"></script>
</body>
</html>

接下来这里附上属性转变的JS代码

JavaScript

$(function(){ setIconData(); }); function setIconData() { if (typeof($iconData != 'undefined')) { $('img[icon-data]').each(function() { var self = $(this); var name = self.attr('icon-data'); if (typeof($iconData[name]) != 'undefined') { self.attr('src', $iconData[name]); self.removeAttr('icon-data'); } }); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
    setIconData();
});
 
function setIconData() {
    if (typeof($iconData != 'undefined')) {
        $('img[icon-data]').each(function() {
            var self = $(this);
            var name = self.attr('icon-data');
            if (typeof($iconData[name]) != 'undefined') {
                self.attr('src', $iconData[name]);
                self.removeAttr('icon-data');
            }
        });
    }
}

 

五、落成效果与利益

  那是页面输入效果,小Logo平常显示出来了

 

真实赌钱游戏平台网站 2

 

这里大家自动生成的JS文件是那样子的格式:

真实赌钱游戏平台网站 3

 

页面调用的代码:

真实赌钱游戏平台网站 4

 

JS对img的icon-data属性转变处理的代码:

真实赌钱游戏平台网站 5

 

大家比较下用base64编码和毫无base64时所费用的时刻:

先看不用的快慢

真实赌钱游戏平台网站 6

再看大家用了base64编码的快慢   真实赌钱游戏平台网站 7

 

一旦一个页面有为数不菲小Logo,那么这种方法对网站的性质优化会有大大的升高。方今此种优化方案是用在自个儿前天的体系中移动端,而上一篇博文解说的改变背景图的优化方案用在大家项目中的PC端。优化效用是很明朗的!当然了,base64编码这种方法也得以用在PC端,大家的项目怎么将它用在手提式有线电话机端,本博文起首部分也许有对其做解释。这里测量检验本身就径直在PC端测验,手提式有线电话机端测量试验也是二个样的。

此间自己补偿有个别:

(1)所生成的base64的js文件是在付出中就成形的了,并非在客商访问时才去变通,作者把HTML代码和PHP代码写在一个文书里是利于,在真正项目中是分开的;

(2)使用此种优化技艺有它的长处,当然也有它的劣势,独有顺应自身项目标优化本事才是好技能;

(3)个中优化技能提出利用在手提式有线电话机端(能够消除背景图优化措施所不能够消除的难点),而PC端的则用联合小Logo生成背景图的点子(看此文:);

(4)此种优化技巧日常用于小Logo(十几K之下),约等于HTTP响应时间远远大于下载时间的时候,用此措施优化会看见明明的机能;

(5)当然能够相称其余优化才干联合使用,效果更简明,比如缓存等。

 

那一次就享受那么多给大家,代码作者都贴上了,并且不少都标上了解说,方便大家清楚。

假诺此博文中有哪儿讲得令人难以驾驭,应接留言调换,若有解说错的地点应接提出。

假定你以为你能在此博法学到了新知识,请为自家顶多个,如小说中有分解错的地点,迎接提议。

  相互学习,共同升高!

2 赞 2 收藏 评论

真实赌钱游戏平台网站 8

HTTP/2 尾部压缩本领介绍

2016/04/13 · 基础技艺 · HTTP/2

本文笔者: 伯乐在线 - JerryQu 。未经作者许可,禁绝转发!
接待参与伯乐在线 专辑我。

作者们知晓,HTTP/2 左券由七个 途观FC 组成:一个是 RFC 7540,描述了 HTTP/2 公约自己;贰个是 RFC 7541,描述了 HTTP/2 公约中央银行使的尾部压缩才能。本文将经超过实际际案例指引我们详细地认知 HTTP/2 底部压缩这门手艺。

运动端自适应方案

真实赌钱游戏平台网站,2015/09/14 · JavaScript, 基本功才能 · 移动端, 自适应

原稿出处: 大搜车的前面端团队博客   

前沿依旧高能 ^_^ , 本文首要消除以下难题:

  • 真正需求动态生成viewport吗?
  • 哪些自适应?

接下来提交主观的顶级实施。

  • 最帅的flex

赶时间戳这里传送门

非常粗大俗无味的文章,看前请喝水。

商讨样本

  1. 手淘 ml.js
  2. Taobao首页
  3. 手提式有线电话机马蜂窝

一个月前去了css开垦者大会,听到了手淘的自适应方案,想起在此以前一向就想领悟ml.js到底干了什么事。回来留意讨论了一晃,抱着好奇心一并看了扳平类型的网址的方案,长远学习一下。

钻探结论

  1. 手淘

    • 获得手提式有线电话机dpr(window.devicePixelRatio),动态生成viewport。
    • 换取手提式有线电话机宽度,分成10份,每一份的小幅度就是rem的尺码。
    • 基于规划稿尺寸(px)通过测算,转变来rem去布局。

    ps:国外天猫商城并从未如此做,而是scale1.0况兼图片大概都是2倍图。

  2. 天猫

    • 采用scale=1.0 写死viewport。
    • flex布局,笃定感觉布局尺寸是375 (iPhone6)
    • rem 确定非flex的元素
  3. 手机驴阿娘
    • 采用scale=1.0 写死viewport
    • px + 百分比布局

福寿齐天在此以前

提起达成在此以前,先轻易过部分定义。

全盘视口

完美视口的定义已经街知巷闻了,假若不领悟能够先戳这里。

在这几篇小说里,还大概会学会设备像素,css像素等概念,大神讲的很通透到底,这里就不献丑了。

ppk 谈 viewport其1 ppk 谈 viewport其2 ppk 谈 viewport其3

此间给出完美视口

XHTML

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>

1
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>

在移动端,低等无定制的急需,都能够用那么些完美视口姣好。可是看见那篇小说的你,显明完美视口还无法满足。

dpr

dpr是devicePixelRatio的简写,也就是屏幕分辩比

历史由来,由于苹果retina的发生,使得清晰度提高,重借使因为`设备像素`晋级了一倍,因而得以用越来越多像素去水墨画更清晰的图像。#自己乱说的#

1
历史原因,由于苹果retina的产生,使得清晰度提升,主要是因为`设备像素`提升了一倍,因此可以用更多像素去绘画更清晰的图像。#我乱说的#

坊间对此dpr更通俗的说教叫

  • 一倍屏
  • 两倍屏
  • 三倍屏

scale

scale是屏幕拉伸比。也等于视口上的initial-scale , maximum-sacle 等属性。

scale 和 dpr的涉及是倒数。

1
scale 和 dpr的关系是倒数。

直观感受

那是本身对dpr的直观感受真实赌钱游戏平台网站 9

平等去显得 1 x 1 像素的点,尽管在显示器上观望标尺寸是一模二样,但背后表现它的像素数量是见仁见智。

那也意味,在同样大小的面积内,更加多物理像素的荧屏上突显色彩的技巧越强。

但那不是本人要关爱的点,大家关怀的是。

1. 是否需要根据倍屏去切换scale达到伸缩的目的

2. 切换scale的成本和回报

上边依照几个试验来回应这七个难点。

20个试玩平台,自适应难题

尝试1 - 故事中的1px

多数交到要动态切换scale的说辞有以下四个。

  1. 1px并不是 [ 真实的1px ] , 2. 为了丰盛利用显示器的分辨率,使用相符显示屏的图形。
1
2
3
1. 1px并不是 [ 真实的1px ] ,
 
2. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。

11 个 HTML5 动画工具

2015/11/16 · HTML5 · 动画

初稿出处: devzum   译文出处:[PHP100

  • Zeroing]()   

明天,在Web开垦中可是盛行的言语正是HTML5了,它扶助开垦者将三种化的剧情表现给顾客。在过去两四年中,大家一块收看了HTML5的进步,它渐渐在网络的世界中储存了人气和流行度。HTML平日会给我们带来新的技能和天性,使得前端技能不断的发展庞大。HTML5境遇接待的案由也在于它给客户带来的高大方便,当前的多数浏览器,如Chrome、Firefox、IE等都对它赋予协理。

HTML5使得开垦者能为你的网址创造出惊人的卡通片效果。这么些很棒的卡通片效果会为你的网址扩大更加多吸重力,接着会带来越来越多的差事。那么些用HTML5创立的动画效果很非凡,看起来很振撼。但为了做出这种动画效果,你供给阅历重重相比麻烦的劳作,所以你能够动用部分无偿或市情上收取金钱的HTML5动画工具。

正文将会为大家介绍市情上最佳的HTML5动画片工具。这几个清单使我们极为用心列出来的,以为大家显示出真正有用且职业的HTML5动画工具。所以随着读下来并找到最适合您须求的非常工具吧,以下种种工具都有它特有的地点。

一、使用indexedDB的基本格局

  1. 开辟数据库並且初叶一个政工。
  2. 制造叁个 objecStore
  3. 构建三个须要来举行一些数据库操作,像扩展或提取数额等。
  4. 通过监听精确类型的 DOM 事件以等待操作完成。
  5. 在操作结果上海展览中心开一些操作(能够在 request 对象中找到)

怎么要削减

在 HTTP/1 中,HTTP 央求和响应都以由「状态行、必要 / 响应底部、新闻主体」三部分组成。平日来讲,音信主体都会透过 gzip 压缩,可能本人传输的正是压缩过后的二进制文件(举例图片、音频),但气象行和尾部却从没经过任何压缩,直接以纯文本传输。

乘势 Web 作用尤为复杂,各类页面发生的伸手数也越多,依据 HTTP Archive 的总结,当前平均各个页面都会发生许多少个必要。越多的央求导致消耗在头顶的流量越多,尤其是每一次都要传输 UserAgent、Cookie 那类不会一再员和转业移的开始和结果,完全部都以一种浪费。

以下是本身随手展开的一个页面包车型大巴抓包结果。可以看到,传输尾部的网络支出超过100kb,比 HTML 还多:

真实赌钱游戏平台网站 10

下边是里面多少个呼吁的细致。能够观望,为了取得 58 字节的数量,在头顶传输上开支了少数倍的流量:

真实赌钱游戏平台网站 11

HTTP/1 时代,为了减小底部消耗的流量,有为数不菲优化方案能够尝试,比方合併央求、启用 库克ie-Free 域名等等,可是这个方案或多或少会引进一些新的难题,这里不张开研讨。

真实的1px

这一条和陈设稿紧凑想关,要切磋它无法撤销设计稿不谈。

那边先补一下切图课,若是本人要做1x , 2x, 3x 的设计稿。怎么着去完结?

尺寸!!!

绝大非常多境况下,设计员产出各类尺寸的稿子(事实上常常只是2倍稿子),都是先画出大尺寸的稿件,再去缩短尺寸,最终导出。 那样会拉动难点:

要是设计员在2倍稿子里画了一条1px的线,那时候假设我们要在scale=1.0里表现的话,就能成为0.5px,如下图。

真实赌钱游戏平台网站 12

而非常的大学一年级些有线电话是无计可施画出0.5px的,因而这里平日有一个hack

CSS

transform:scaleX(0.5)或transform:scaleY(0.5)

1
transform:scaleX(0.5)或transform:scaleY(0.5)

而是有人建议了, 既然可以改换viewport的scale达到合理施用分化倍屏的优势,为何不那样写吗。

XHTML

<meta name="viewport" content="initial-scale=2.0,width=device-width/>

1
<meta name="viewport" content="initial-scale=2.0,width=device-width/>

等等,为了设计稿的尺寸大家那样挖空心绪?

事实上,尽管2x布署稿幸免了1px。3x设计稿也只怕现身2px。

而且这里假诺写死scale大概引致部分地方和稿子出入相当的大,不恐怕苏醒设计稿,分界面包车型地铁来得会减小。

消除这些主题素材的关键在于:沟通

  • 一经你的设计员是个须要从严,何况产品分界面把控特别严峻来讲,应该动态去落到实处viewport或利用scale的hack去改换。
  • 假如有个别区域实际不必要[ 过度优化 ], scale=1.0 实在是异常的低花费还原的方案,未尝不可。

1. Mixeek

那是一款用来布置和平运动转Web动画和互动的免费应用工具。它基于JavaScript,CSS3和HTML5,它富有轻量级、已使用的性状。

二、创设、张开数据库

indexedDB 存在于全局对象window上, 它最要害的一个艺术正是open方法, 该方法接收八个参数:

  • dbName // 数据库名称 [string]
  • version // 数据库版本 [整型number]

var DB_NAME = 'indexedDB-test', VERSION = 1, db; var request = indexedDB.open(DB_NAME, VELacrosseSION); request.onsuccess = function(event) { db = event.target.result; // console.log(event.target === request); // true db.onsuccess = function(event) { console.log('数据库操作成功!'); }; db.onerror = function(event) { console.error('数据库操作产生错误!', event.target.errorCode); }; console.log('展开数据库成功!'); }; request.onerror = function(event) { console.error('创立数据库出错'); console.error('error code:', event.target.errorCode); }; request.onupgradeneeded = function(event) { // 更新指标存款和储蓄空间和目录 .... };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var DB_NAME = 'indexedDB-test', VERSION = 1, db;
var request = indexedDB.open(DB_NAME, VERSION);
request.onsuccess = function(event) {
    db = event.target.result;
    // console.log(event.target === request); // true
    db.onsuccess = function(event) {
        console.log('数据库操作成功!');
    };
    db.onerror = function(event) {
        console.error('数据库操作发生错误!', event.target.errorCode);
    };
    console.log('打开数据库成功!');
};
request.onerror = function(event) {
    console.error('创建数据库出错');
    console.error('error code:', event.target.errorCode);
};
request.onupgradeneeded = function(event) {
   // 更新对象存储空间和索引 ....
};

即使本域下海市蜃楼名称为DB_NAME的数据库,则上述代码会创立二个名叫DB_NAME、版本号为VERSION的数据库; 触发的事件依次为: upgradeneededsuccess.

假使已存在名称为DB_NAME的数据库, 则上述代码会张开该数据库; 只触及success/error事件,不会触发upgradeneeded事件. db是对该数据库的援用.

减少后的意义

接下去本人将选拔访问本博客的抓包记录以来明 HTTP/2 尾部压缩带来的变通。怎么样利用 Wireshark 对 HTTPS 网址进行抓包并解密,请看作者的那篇小说。

先是直接上海体育场所。下图选中的 Stream 是第三回访谈本站,浏览器发出的央浼头:

真实赌钱游戏平台网站 13

从图片中能够见到这几个 HEADELANDS 流的长度是 206 个字节,而解码后的头顶长度有 451 个字节。综上可得,压缩后的底部大小裁减了大要上多。

只是那正是全部啊?再上一张图。下图选中的 Stream 是点击本站链接后,浏览器发出的要求头:

真实赌钱游戏平台网站 14

能够观望这一回,HEADEHighlanderS 流的长度独有 49 个字节,可是解码后的头顶长度却有 470 个字节。那叁回,压缩后的尾部大小差不离独有原本大小的 1/10。

怎么前后四遍差别这么大啊?大家把两回的头部音讯实行,查看同二个字段两遍传输所攻下的字节数:

真实赌钱游戏平台网站 15

真实赌钱游戏平台网站 16

相比较之下后方可窥见,第叁次的伸手尾部之所以比很小,是因为许多键值对只占用了三个字节。越发是 UserAgent、库克ie 那样的头顶,第贰遍呼吁中供给占用相当多字节,后续诉求中都只须要贰个字节。

对应倍图

对此那或多或少,争论相当多,因为一旦要产生对应倍图的话,意味着图片都亟待做三份。费用太高了。

此间日常有三种做法

  1. 图片服务

    例如说在100×100的图片容器中。

1倍图 http:// img.xxx.com/abc.jpg_100x100 2倍图 http://
img.xxx.com/abc.jpg_200x200 3倍图 http://
img.xxx.com/abc.jpg_300x300

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-8">
8
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d5d723297616-1" class="crayon-line">
1倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-2" class="crayon-line crayon-striped-line">
 http:// img.xxx.com/abc.jpg_100x100
</div>
<div id="crayon-5b8f19d520d5d723297616-3" class="crayon-line">
 
</div>
<div id="crayon-5b8f19d520d5d723297616-4" class="crayon-line crayon-striped-line">
 2倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-5" class="crayon-line">
 http:// img.xxx.com/abc.jpg_200x200
</div>
<div id="crayon-5b8f19d520d5d723297616-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d5d723297616-7" class="crayon-line">
 3倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-8" class="crayon-line crayon-striped-line">
 http:// img.xxx.com/abc.jpg_300x300
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 定死尺寸

    放弃1屏手机,全体启用2倍图,由于流量会损耗十分的大(低等机),因而滚动加载等优化手腕就能够来得十分重要了。

试验1 – scale对倍图主要呢

此处看一下不等scale下图片的距离。

  • 测验样本:160×160波士顿凯尔特人(Boston Celtics)标logo(一相当的大心揭穿了乌紫的血液)
  • 测量检验容器:160×160 img标签
  • 测验情况: intial-scale分别为1.0 / 0.5 / 0.3333
  • 图片尺寸: 1x(160×160) 2x(320×320) 3x(480×480)

真实赌钱游戏平台网站 17

测量检验结论:不同scale下使用不同图片差距一点都不小。

唯独此地要求验证,是不是不同scale同一图片差距起到相对功效。

真实赌钱游戏平台网站 18

  • 眼睛见到基本无区别,除了用取色器去取得,会意识有色差和一些像素被分开(下边会谈起),之外,用分歧scale展现同一图片大旨未有啥分别。

实验2 – DownSampling

鉴于上三个实验最终的图片,使用同一scale下,分化倍数的图片,存在色差,这里说美素佳儿(Friso)下。

  • 测量试验方案

    测试图片:

 真实赌钱游戏平台网站 19

图片尺寸: 400×300 , 300×225 , 200×150 , 100×75

测试环境: scale = 1.0

测试容器: 100×75的 img元素

由于事先知道了Down萨姆pling概念的存在,这里只是好奇心驱动试验眨眼间间。(对自适应其实并没有卵用)

Down萨姆pling是说大图放入比图片尺寸小的器皿中的时候,出现像素分割成就近色的景观。

测试结果:

真实赌钱游戏平台网站 20

注:6plus貌似和别的机型分裂。

触发情况: 差异颜色像素接触的地点,会产出DownSampling。

真实赌钱游戏平台网站 21

rem

对此rem要说的十分少,看那张图。对于使用px的因素,使用rem统一去管理是很灵活的!

真实赌钱游戏平台网站 22

字体

不管选取动态生成viewport大概写死scale,字体都急需适配大屏。以前建议的rem方案被认证在差异手提式有线电话机上出示不等同,这里照旧回归成了px。

px最棒用双数

三种方案(这里不思虑媒体询问,因为Android碎..,嗯,不说了…)

  1. JS动态总结(常见做法)
根据不同屏幕宽度计算不同字号大小。 1.
定基准值,设计稿是750宽度(2倍屏),字体的大小是24px. 2.
计算指定宽度的字体大小。 var fontSize = width / 750 * 24 ;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d62124238623-1" class="crayon-line">
根据不同屏幕宽度计算不同字号大小。
</div>
<div id="crayon-5b8f19d520d62124238623-2" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-3" class="crayon-line">
1. 定基准值,设计稿是750宽度(2倍屏),字体的大小是24px.
</div>
<div id="crayon-5b8f19d520d62124238623-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-5" class="crayon-line">
2. 计算指定宽度的字体大小。
</div>
<div id="crayon-5b8f19d520d62124238623-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-7" class="crayon-line">
var fontSize = width / 750 * 24 ;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 根据dpr设定 (比较好的做法)

    ps : 常常时开头化时设置为根元素html的attribute,

JavaScript

window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d65248160001-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d65248160001-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d65248160001-1" class="crayon-line">
   window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)
</div>
<div id="crayon-5b8f19d520d65248160001-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>

然后css这样写



CSS

[dpr=1] { font-size=16px; } [dpr=2] { font-size=32px; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d69092077898-1" class="crayon-line">
[dpr=1] {
</div>
<div id="crayon-5b8f19d520d69092077898-2" class="crayon-line crayon-striped-line">
       font-size=16px; 
</div>
<div id="crayon-5b8f19d520d69092077898-3" class="crayon-line">
}
</div>
<div id="crayon-5b8f19d520d69092077898-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d69092077898-5" class="crayon-line">
[dpr=2] {
</div>
<div id="crayon-5b8f19d520d69092077898-6" class="crayon-line crayon-striped-line">
       font-size=32px; 
</div>
<div id="crayon-5b8f19d520d69092077898-7" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

布局

权衡之下,作者觉着flex真的灵活方便太多,由此这里给出贰个布局demo。大概如下图。(画的可比粗糙..)

(上稿下还原)

真实赌钱游戏平台网站 23真实赌钱游戏平台网站 24

主题包括:

  • 固化底部
  • 定点尾部
  • 多列自适应
  • 中度自定义
  • 剧情滚动

为什么flex可见成功百分比做不到的自适应。

举例说我们也去学天猫,笃定以为步长便是375(BlackBerry6尺寸),那么八个元素flex分别为200和175。

无须计量比例,在分化的分界面上就能够活动测算,並且以该浏览器能够识别的小小单位落实,比自身总括的百分比要精准。

真实赌钱游戏平台网站 25

demo传送门

结论

  1. 写死initial-scale=1.0 对于落到实处1px问题, 难点非常的大。与设计师沟通协商才是最佳的化解难点的诀要。
  2. 写死initial-scale=1.0着力选取,移动端自适应方案。 对于不相同图片的来得, 选拔区别倍图的话,会有必然减弱,但在可承受范围内。(当然,动态生成scale能够周密显示…)
  3. 布局

    假设使用动态生成viewport方案,就用到rem来还原设计稿(还会有rem-px的总括)。耗费在效率上。

    假若采纳写死initial-scale=1.0方案,就用flex布局,首要财力在flex兼容性上,可是贯彻非常灵活简单。

后记

viewport的scale的最首要远比小编虚构的要低非常多,小编本来感到这就是自适应。

而是后来意识,其实自适应依然回到了远古时期的百分比%,只是以后有更智慧越来越灵活的法子flex,今后应当有多个样子去自适应。

  • 贰个是拥抱vw,vh。(手淘的ml.js十等分宽度,1rem=10vw
  • 三个是更加好的接纳flex

近年来使用后面一个已经有那多少个的库能够缓和包容性了,如参谋财富最终的一个flex库。

调查研究的网址并非常少,然而百分比依旧是很三人的首推。

参照财富

手淘ml库

手提式有线电话机Taobao

天猫商城首页

运动端高清、多平适配方案

rem对webapp带来的熏陶

flex方案 适配到IE10+

 

 

2 赞 10 收藏 评论

真实赌钱游戏平台网站 26

2. Animatron

它最首要用于设计和表露动画/交互的剧情,包含在PC端和手提式有线电话机端多个地点。

三、成立对象存款和储蓄空间和目录

在关系型数据库(如mysql)中,一个数据库中会有多张表,每张表有独家的主键、索引等;

key-value型数据库(如indexedDB)中, 三个数据库会有多个指标存款和储蓄空间,每种存储空间有和好的主键、索引等;

创造对象存款和储蓄空间的操作日常位于创造数据库成功回调里:

request.onupgradeneeded = function(event) { // 更新目标存款和储蓄空间和目录 .... var database = event.target.result; var objectStore = database.createObjectStore("movies", { key帕特h: "id" }); objectStore.createIndex('alt', 'alt', { unique: true }); objectStore.createIndex('title', 'title', { unique: false }); };

1
2
3
4
5
6
request.onupgradeneeded = function(event) { // 更新对象存储空间和索引 ....
    var database = event.target.result;
    var objectStore = database.createObjectStore("movies", { keyPath: "id" });
    objectStore.createIndex('alt', 'alt', { unique: true });
    objectStore.createIndex('title', 'title', { unique: false });
};

真实赌钱游戏平台网站 27

onupgradeneeded 是我们独一可以修改数据库结构的地点。在那其间,大家能够成立和删除对象存款和储蓄空间以及创设和删除索引。

在数据库对象database上,有以下格局可供调用:

  1. createObjectStore(storeName, configObj) 创建一个对象存款和储蓄空间
    • storeName // 对象存款和储蓄空间的名称 [string]
    • configObj // 该对象存款和储蓄空间的安排 [object] (当中的keyPath属性值,标识对象的该属性值唯一)
  2. createIndex(indexName, objAttr, configObj) 创建一个索引
    • indexName // 索引名称 [string]
    • objAttr // 对象的性质名 [string]
    • configObj // 该索引的安插对象 [object]

本领原理

上面那张截图,取自 Google 的习性专家 Ilya Grigorik 在 Velocity 二〇一四 • SC 会议中享受的「HTTP/2 is here, let’s optimize!」,极度直观地陈诉了 HTTP/2 中尾部压缩的准绳:

真实赌钱游戏平台网站 28

笔者再用通俗的言语讲明下,尾部压缩必要在帮衬 HTTP/2 的浏览器和服务端之间:

  • 保障一份一样的静态字典(Static Table),包括常见的头顶名称,以及特地常见的尾部名称与值的咬合;
  • 保障一份同样的动态字典(Dynamic Table),能够动态地增进内容;
  • 帮忙基于静态哈夫曼码表的哈夫曼编码(Huffman Coding);

静态字典的成效有三个:1)对于截然相称的尾部键值对,比方 :method: GET,能够直接行使贰个字符表示;2)对于底部名称能够包容的键值对,比如 cookie: xxxxxxx,能够将名称使用贰个字符表示。HTTP/2中的静态字典如下(以下只截取了有些,完整表格在这里):

Index Header Name Header Value
1 :authority
2 :method GET
3 :method POST
4 :path /
5 :path /index.html
6 :scheme http
7 :scheme https
8 :status 200
32 cookie
60 via
61 www-authenticate

再者,浏览器可以告知服务端,将 cookie: xxxxxxx 增添到动态字典中,那样持续一切键值对就能够运用二个字符表示了。类似的,服务端也得以创新对方的动态字典。须要小心的是,动态字典上下文有关,必要为每种HTTP/2 连接维护分裂的字典。

运用字典能够大幅地进级压缩效果,个中静态字典在第叁次呼吁中就能够动用。对于静态、动态字典中不设有的始末,仍可以使用哈夫曼编码来减小体积。HTTP/2 使用了一份静态哈夫曼码表(详见),也亟需内置在顾客端和服务端之中。

这里顺便说一下,HTTP/1 的情景行新闻(Method、Path、Status 等),在 HTTP/第22中学被拆成键值对放入尾部(冒号早先的这一个),一样能够大快朵颐到字典和哈夫曼压缩。别的,HTTP/第22中学颇负底部名称必须小写。

3. Tumult Hype

设计员们能够用它创立出优质的Web内容,并且大概不用任何的Coding,能够运作在桌面、手提式无线话机和Pad上。

版权声明:本文由20个试玩平台发布于真实赌钱游戏网站,转载请注明出处:着力选取,移动端自适应方案