缩放工具哪些棋牌平 台比较正规像素缩放不是由字节表示，
点击联系发帖人
时间：2017-07-13 03:54
后使用快捷导航没有帐号？
今日: 0|昨日: 116|帖子: 936852|会员: 137320|欢迎新会员:
说字论语汉典说字最新文章
[][][][][][][][][]
汉典论语最新主题
昨天&14:04
主题: 22, 帖数: 944
主题: 4554, 帖数: 1万
主题: 2050, 帖数: 1万
主题: 6, 帖数: 98
主题: 8万, 帖数: <span title="万
主题: 3万, 帖数: 3万
主题: 52, 帖数: 359
主题: 131, 帖数: 1668
主题: 8286, 帖数: <span title="万
主题: 2903, 帖数: 1万
主题: 472, 帖数: 8473
主题: 6726, 帖数: 4万
主题: 156, 帖数: 2429
主题: 143, 帖数: 3209
主题: 294, 帖数: 3553
主题: 135, 帖数: 1732
主题: 49, 帖数: 827
主题: 86, 帖数: 525
主题: 101, 帖数: 655
主题: 34, 帖数: 225
主题: 18, 帖数: 550
主题: 43, 帖数: 290
主题: 50, 帖数: 496
主题: 64, 帖数: 204
主题: 460, 帖数: 7978
主题: 3690, 帖数: 2万
主题: 1057, 帖数: 7764
主题: 275, 帖数: 1807
主题: 326, 帖数: 4822
主题: 20, 帖数: 80
主题: 1万, 帖数: <span title="万
主题: 1万, 帖数: 9万
主题: 781, 帖数: 2万
主题: 3521, 帖数: 2万
主题: 12, 帖数: 99
主题: 56, 帖数: 486
主题: 2万, 帖数: <span title="万
主题: 5, 帖数: 180
主题: 1176, 帖数: 1万
主题: 47, 帖数: 507
今天是日祝下列会员生日快乐
- 总计 197 人在线
- 最高记录是 8615 于 .
Copyright &
&&all rights reserved&figure&&img src=&https://pic4.zhimg.com/v2-94c1ad8e5add_b.jpg& data-rawwidth=&1164& data-rawheight=&873& class=&origin_image zh-lightbox-thumb& width=&1164& data-original=&https://pic4.zhimg.com/v2-94c1ad8e5add_r.jpg&&&/figure&&h2&识别知乎验证码&/h2&&p&最近在爬知乎的数据，遇到了验证码，就使用TensorFlow的CNN训练了一个能自动识别验证码的模型，最后识别线上验证码的准确率在95%左右。
&/p&&h2&依赖库&/h2&&ol&&li&Python3&/li&&li&requests&/li&&li&PIL & numpy&/li&&li&TensorFlow&/li&&li&CNN&/li&&/ol&&h2&分析&/h2&&p&做爬虫请求知乎接口频繁时，会遇到两种验证码：细字体和粗字体。
&/p&&figure&&img src=&https://pic3.zhimg.com/v2-c62fbb72d1daeed_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&442& data-rawheight=&460& class=&origin_image zh-lightbox-thumb& width=&442& data-original=&https://pic3.zhimg.com/v2-c62fbb72d1daeed_r.jpg&&&/figure&&p&如果把两种验证码混合放到同一个神经网络中训练的话，收敛会比较慢，需要的样本量就比较大，如果手上样本量不够多，我们可以先训练一个分类器，将两种验证码区分开，再分别去训练识别，这样需要的样本量就会少很多而且每个分类准确率都能得到保证！&/p&&p&最开始我样本量不够时就是是按照上面的做法实现的，现在样本足够了就可以把两种验证码在样本混合起来直接丢到CNN里训练就好了，最后也达到不错的准确率！&/p&&hr&&p&&b&代码链接在文末。&/b&&/p&&h2&如何运行 &/h2&&ol&&li&把你的验证码样本放到&code&samples&/code&目录下的&code&train_mixed_captcha_base64.txt&/code&文件中。&/li&&li&训练模型：运行&code&train&/code&目录下的&code&model.py&/code&文件，直到达到你满意的准确率为止。这时训练好的网络结构和权重值会保存在&code&checkpoints&/code&目录下。 &/li&&li&恢复上一步训练好的网络模型，导出&code&predict_captcha&/code&预测函数。&/li&&li&传入base64编码的图片字符串，执行&code&predict_captcha&/code&函数，得到预测结果。&/li&&li&Boom！想干嘛你就可以干嘛了！&/li&&/ol&&hr&&h2&CNN&/h2&&p&代码中的模型使用TensorFlow构建了一个简单的卷积神经网络。&/p&&p&包含：&b&一个输入层&/b&、&b&三个卷积层&/b&+&b&池化层&/b&和最后一个&b&全连接层&/b&。&/p&&p&至于网络模型为什么是这种结构，因为：&b&前人根据经验总结出来这种结构训练的效果会比较好&/b&。&/p&&p&当然你也可以尝试其他的结构，只要效果好就行了。我们都是&b&黑盒调参&/b&的。
&/p&&p&&br&&/p&&p&使用&b&TensorBoard&/b&可以可视化训练的关情况。 &/p&&p&给大家看一下我训练的&b&网络结构&/b&：
&/p&&figure&&img src=&https://pic4.zhimg.com/v2-85df26e1dabcc9dbd940ecff_b.jpg& data-size=&small& data-rawwidth=&1006& data-rawheight=&1090& class=&origin_image zh-lightbox-thumb& width=&1006& data-original=&https://pic4.zhimg.com/v2-85df26e1dabcc9dbd940ecff_r.jpg&&&figcaption&网络结构&/figcaption&&/figure&&p&&br&&/p&&p&&b&准确率走势图&/b&：
&/p&&figure&&img src=&https://pic2.zhimg.com/v2-6951657ff_b.jpg& data-size=&small& data-rawwidth=&1030& data-rawheight=&770& class=&origin_image zh-lightbox-thumb& width=&1030& data-original=&https://pic2.zhimg.com/v2-6951657ff_r.jpg&&&figcaption&准确率曲线&/figcaption&&/figure&&p&&br&&/p&&p&&b&loss曲线&/b&：
&/p&&figure&&img src=&https://pic4.zhimg.com/v2-aa34f33345cbe2fb247ac2f_b.jpg& data-size=&small& data-rawwidth=&1072& data-rawheight=&760& class=&origin_image zh-lightbox-thumb& width=&1072& data-original=&https://pic4.zhimg.com/v2-aa34f33345cbe2fb247ac2f_r.jpg&&&figcaption&loss曲线&/figcaption&&/figure&&p&&br&&/p&&p&&b&最后&/b&，使用训练好的模型&b&Cover&/b&到知乎线上的验证码平均识别准确率在95%左右，也就是两次至少命中一次的概率为：1 - 0.05*0.05 = 99.75%，够我用啦然后……你懂的！&/p&&p&&br&&/p&&p&&b&源码地址&/b&：&a href=&https://link.zhihu.com/?target=https%3A//github.com/lonnyzhang423/zhihu-captcha& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&github.com/lonnyzhang42&/span&&span class=&invisible&&3/zhihu-captcha&/span&&span class=&ellipsis&&&/span&&/a&&/p&&hr&&p&&b&UPDATE&/b&&/p&&p&知乎最近升级了验证码服务，换成腾讯的滑块验证码，如下图：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-9e5bf2dfdeb4c2e5a90632_b.jpg& data-caption=&& data-size=&small& data-rawwidth=&806& data-rawheight=&752& class=&origin_image zh-lightbox-thumb& width=&806& data-original=&https://pic2.zhimg.com/v2-9e5bf2dfdeb4c2e5a90632_r.jpg&&&/figure&&p&之前的字符验证码样本就再次分享出来给大家学习使用吧！这下应该没人举报了吧&/p&&p&关注公众号：&b&Python实验课 ，&/b& 后台回复：&b&知乎验证码
&/b&获取百度云链接。&/p&&p&&br&&/p&&p&&b&UPDATE&/b&&/p&&p&写了一个api给大家测试预测的效果&/p&&p&&b&地址&/b&：&a href=&https://link.zhihu.com/?target=http%3A//47.96.150.119/api/toolkit/captcha& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&47.96.150.119/api/toolk&/span&&span class=&invisible&&it/captcha&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&b&方法&/b&：POST&/p&&p&&b&参数&/b&：img_base64&/p&&p&&br&&/p&&p&我自己用Postman测试效果还是可以的&/p&&figure&&img src=&https://pic1.zhimg.com/v2-5b72e2b8f5afff7066ac0_b.jpg& data-caption=&& data-size=&small& data-rawwidth=&1356& data-rawheight=&978& class=&origin_image zh-lightbox-thumb& width=&1356& data-original=&https://pic1.zhimg.com/v2-5b72e2b8f5afff7066ac0_r.jpg&&&/figure&&p&&/p&
识别知乎验证码最近在爬知乎的数据，遇到了验证码，就使用TensorFlow的CNN训练了一个能自动识别验证码的模型，最后识别线上验证码的准确率在95%左右。 依赖库Python3requestsPIL & numpyTensorFlowCNN分析做爬虫请求知乎接口频繁时，会遇到两种验证码：细字…
&p&是否还在为你的应用程序适配PC端，移动端，平板而苦苦思索呢，是否在寻找如何一套代码适配多终端方式呢，是否希望快速上手实现你的跨终端应用程序呢，是的话，那就看过来吧，本文阐述响应式UI设计相关理论基础，包括：屏幕尺寸，物理，设备独立，CSS像素，dpr，视口等相关概念，还有响应式设计基础，常见设计模式，及响应式UI实现基本思路，希望能加深对响应式的理解和实践思路。&/p&&a href=&https://link.zhihu.com/?target=http%3A//blog.codingplayboy.com//responsive-web-design/& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic2.zhimg.com/v2-045e29f994be703ada4e58d15bf41ff5_ipico.jpg& data-image-width=&558& data-image-height=&480& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&浅谈响应式Web设计与实现思路 - 熊建刚的博客&/a&&h2&响应式（Responsive）&/h2&&p&响应式是什么呢？顾名思义，响应式，肯定会自动响应，响应什么？应用程序是在终端屏幕窗口中展示给用户，被用户访问的，那么就是响应屏幕的变化，不同终端屏幕尺寸大小不一致，需要针对不同尺寸屏幕进行不同的展示响应。&/p&&blockquote&&i&&b&响应式（Responsive web design, RWD）&/b&，是指一套应用程序用户界面（User Interface）能自动响应不同设备窗口或屏幕尺寸（screen size）并且内容，布局渲染表现良好。&/i&&/blockquote&&h2&自适应（Adaptive）&/h2&&p&在响应式设计（RWD）之外，还有一种适配多设备屏幕的方式，&b&自适应设计（Adaptive web design， AWD）&/b&。&/p&&blockquote&&i&自适应设计(AWD)，是指一个应用程序使用多版本用户界面，针对不同设备屏幕，服务器端返回不同版本用户界面，供用户访问。&/i&&/blockquote&&h2&自适应vs响应式&/h2&&p&自适应和响应式设计的不同主要概括如下：&/p&&ol&&li&自适应是多套用户界面，而后者则只有一套用户界面；&/li&&li&自适应需要服务端检测请求设备分辨率相关信息，然后选择对应版本返回；&/li&&li&自适应可以在不同版本使用不同适配方案，如在PC端使用百分比，在移动端使用rem等，而响应式则需要一个完美兼容的适配方案；&/li&&li&以头条网站为例，访问&code&www.toutiao.com&/code&PC端会打开PC版本web应用，而在移动端打开，则服务端会重定向至&code&m.toutiao.com&/code&，对应的返回的就是移动端版本web应用；&/li&&/ol&&p&自然的，我们本篇要关注的自然是响应式用户界面设计，即一套应用程序适配多设备。&/p&&h2&移动优先（Mobile first）&/h2&&p&从2014年开始，移动设备使用访问率已经超过PC，所以在设计响应式页面程序时，通常都是移动优先，即先适配移动样式和布局，然后再调整适配PC端。&/p&&h2&渐进增强（Progress enhancement）&/h2&&p&另外我们知道移动设备众多，一些低版本或旧系统的设备并不支持JavaScript或CSS的新特性，如es6，media query等，所以通常实现一个基础版本，在大部分设备能满足基本功能后，针对性兼容的添加新功能，新特性，逐步拓展应用，这就是渐进增强。&/p&&h2&屏幕（screen）&/h2&&p&前面讲响应式就是响应屏幕尺寸，那么屏幕尺寸如何衡量呢？主要从尺寸单位，设备独立像素和像素密度等角度考虑。&/p&&h2&物理尺寸（Display size ／Physical size）&/h2&&p&屏幕物理尺寸，指根据屏幕对角线（diagonal）测量的实际物理尺寸，就像我们通常说的屏幕是多少寸的，是5.1还是5.5，平板是10.1，电视是42还是37寸，这里的寸都指（英寸），而且是以对角线长度计量的。&/p&&p&对角线长度，则可以根据三角公式，由宽和高计算得出：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-045e29f994be703ada4e58d15bf41ff5_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&558& data-rawheight=&480& class=&origin_image zh-lightbox-thumb& width=&558& data-original=&https://pic1.zhimg.com/v2-045e29f994be703ada4e58d15bf41ff5_r.jpg&&&/figure&&p&&br&&/p&&h2&逻辑尺寸（Logic size ／Display resolution）&/h2&&p&和屏幕物理尺寸相对的则有逻辑尺寸概念，或者叫它展示分辨率（resolution），而和物理尺寸以长度inch为单位不同，逻辑尺寸则以像素（pixel）为单位计量。&/p&&h2&DIMENSION&/h2&&p&和物理尺寸以对角线为方向计量屏幕大小不同的是，逻辑尺寸分别从横向（宽），纵向（高）两个方向表示屏幕的尺寸：width，height。以一台&code&“1024 × 768”&/code&分辨率的笔记本为例，这表示设备屏幕的宽是1024像素，高为768像素。&/p&&h2&物理像素（device pixel）&/h2&&p&物理像素，也叫&b&设备像素&/b&，&b&实际像素&/b&，在计算机数字图像中，一个像素（pixel）或一个点（dot）是在一个光栅图片（raster image）中的一个物理点，它是图像在屏幕上展示的的最小可控制元素。&/p&&blockquote&&i&所谓的光栅（raster image）或位图（bitmapped image）图片，是指将图像定义为由点（或像素）组成，每个点（或像素）可以由多种色彩表示，包括2、4、8、16、24和32位色彩。例如，一幅分辨率的32位彩色图片，其所占存储字节数为：&code&×32/(8*KB&/code&(一字节等于8位)。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-8b02165bbac8fd8fbe2deb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&517& data-rawheight=&167& class=&origin_image zh-lightbox-thumb& width=&517& data-original=&https://pic4.zhimg.com/v2-8b02165bbac8fd8fbe2deb_r.jpg&&&/figure&&p&&br&&/p&&p&如图，将屏幕放大至一定程度，可以看见是由很多个点（或像素）组成，屏幕上的这些一个一个的点（或像素）就是我们说的&b&物理像素&/b&，而像素数量的不同及每个像素的不同色彩表示就构成图像展示，决定它的视觉表现。&/p&&h2&CSS像素（CSS Pixel）&/h2&&p&除了前面介绍的物理像素，还有一种像素经常被提及，那就是CSS像素，也作&b&逻辑像素&/b&，&b&虚拟像素&/b&，它仅仅是描述图像单元信息的概念，通常描述图像中某一个小方框所需要展示的颜色值，而这一些列方框点合起来就能描述一幅图像，web编程中用来度量网页内容尺寸或位置的就是这个&b&抽象单位&/b&。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-1f9b07ef5defee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&437& data-rawheight=&256& class=&origin_image zh-lightbox-thumb& width=&437& data-original=&https://pic2.zhimg.com/v2-1f9b07ef5defee_r.jpg&&&/figure&&p&&br&&/p&&h2&分辨率（resolution）&/h2&&p&分辨率通厂都是指设备分辨率，即设备屏幕上显示的物理像素总和，以一台&code&“1024 × 768”&/code&分辨率的笔记本为例，这表示设备屏幕的宽是1024物理像素，高为768物理像素，它展示的像素总数就是&code&&/code&。&/p&&h2&像素密度（Pixel density）&/h2&&p&屏幕上每英寸（PPI，Pixel per inch）或每厘米（PPCM，Pixel per centimeter）上拥有的&b&物理像素&/b&（或点）的数量，称为&b&像素密度&/b&，也作&b&屏幕密度&/b&，计算公式为：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&pixel density(pd) =
屏幕宽度物理像素 ／ 屏幕宽度英寸；
&/code&&/pre&&/div&&p&如一个15英寸（对角线）大小的设备，有一个12英寸宽，9英寸高的屏幕，并且其分辨率为&code&&/code&像素，则其像素密度则大概为85PPI：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&pd = 1024 ／ 12 ～= 768 ／ 9 ～= 85PPI
&/code&&/pre&&/div&&p&当然横纵方向上的像素密度并不总是相同的，如将上面例子的分辨率改为&code&&/code&，则：&/p&&ol&&li&横向：&code&pd = 1280 / 12 ~=107PPI&/code&;&/li&&li&纵向：&code&pd = 1024 / 9 ~= 114PPI&/code&;&/li&&/ol&&h2&分辨率转换为像素密度&/h2&&p&根据屏幕分辨率计算得出像素密度公式，如：&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-f43b35b0cdb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&564& data-rawheight=&266& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&https://pic4.zhimg.com/v2-f43b35b0cdb_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&&code&w&sub&p&/sub&&/code&：分辨率横向像素数；&/li&&li&&code&h&sub&p&/sub&&/code&：分辨率纵向像素数；&/li&&li&&code&d&sub&p&/sub&&/code&：对角线分辨率像素数；&/li&&li&&code&di&/code&：对角线物理尺寸（inch）；&/li&&li&&code&V&sub&pd&/sub&&/code&：像素密度，单位为PPI；&/li&&/ol&&h2&密度等级划分&/h2&&p&为简便起见，Android 将所有屏幕密度分组为六种通用密度： 低、中、高、超高、超超高和超超超高。而低密度屏幕在给定物理区域的物理像素少于高密度屏幕。&/p&&h2&点密度（DOTS PER INCH）&/h2&&p&另外我们可能还听过点密度（dots per inch，dpi），它和前面介绍的像素密度相似，通常可以交叉使用，只是描述领域不同，像素（pixel）通常在计算机视觉显示领域使用，而点（dot）则主要在打印或印刷领域中使用。&/p&&h2&设备独立像素（dp／dip）&/h2&&p&设备独立像素（device independent pixel，称为dp或dip），也叫&b&密度无关像素&/b&，是基于屏幕物理密度的抽象单位。首先由Google提出适配众多Android设备屏幕的抽象单位。在定义 UI 布局时可以使用的&b&虚拟像素&/b&单位，表示布局维度或位置。&/p&&blockquote&&i&它是一个基于计算机坐标系统的物理度量单位，并且可以将物理像素抽象为&b&虚拟像素&/b&以便在应用中使用，然后计算机内部系统可以将应用中使用的虚拟像素转换为&b&实际物理像素&/b&。&/i&&/blockquote&&p&这中抽象使得移动设备可以在不同屏幕缩放展示信息和用户交互界面，而内部图像系统可以将应用中的抽象像素度量转换为实际像素度量，因此应用可以直接使用抽象像素，而不用编码处理大量的物理像素差异化的设备。通常，安卓设备假设“中等”密度屏幕设备独立像素基准为：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&一个设备独立像素（dp／dip）等于160 dpi（或PPI） 屏幕上的一个物理像素，即等于1 / 160英寸。
&/code&&/pre&&/div&&p&而windows则定义一个设备独立像素为96dpi屏幕上的一个物理像素，即1dp等于1 ／ 96英寸；Apple系统则默认一个设备独立像素为72dpi屏幕上的一个物理像素。系统运行时，根据当前屏幕的实际密度以透明方式处理 dp 单位的任何缩放 。&/p&&h2&计算设备独立像素&/h2&&p&如何计算某一设备的设备独立像素呢？根据上面介绍可以得到dp和inch的如下等式：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-12ee4a4c7db873baaf6f0547abe19e45_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&468& data-rawheight=&130& class=&origin_image zh-lightbox-thumb& width=&468& data-original=&https://pic3.zhimg.com/v2-12ee4a4c7db873baaf6f0547abe19e45_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&&code&*ratio*&/code&：即设备系统指定的默认比例;&/li&&li&&code&inch&/code&：物理尺寸，英寸；&/li&&/ol&&p&所以可以得到dp和物理像素的转换关系：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-35a3a1a94f6dfe633f5aa_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&640& data-rawheight=&130& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-35a3a1a94f6dfe633f5aa_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&&code&V&sub&pd&/sub&&/code&：设备像素密度；&/li&&li&&code&PPI*inch&/code&：&code&pixel/inch * inch = pixel&/code&;&/li&&/ol&&p&如，当屏幕密度为240dpi（或PPI），即&code&V&sub&pd&/sub& = 240&/code&时，1 dip 则等于1.5个物理像素（pixel）。&/p&&h2&设备像素比（dpr）&/h2&&p&关于物理像素，设备独立像素或CSS像素，有一个很常见的概念，设备像素比（device pixel ratio，dpr），它描述的是使用多少实际像素渲染一个设备独立像素，它的计算方式为：&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-fd2ecab967743_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&302& data-rawheight=&116& class=&content_image& width=&302&&&/figure&&p&&br&&/p&&ol&&li&&code&N&sub&dp&/sub&&/code&: 设备屏幕实际像素数；&/li&&li&&code&N&sub&px&/sub&&/code&: 屏幕设备独立像素数（PC端通常等于CSS像素数）；&/li&&li&&code&dpr&/code&：设备像素比；&/li&&/ol&&p&在浏览器中，我们可以使用&code&window.devicePixelRatio&/code&获取其dpr值，dpr更高的设备屏幕会使用更多物理像素展示一个设备独立像素，所以其效果更细腻，更精致。如在一个dpr=2的设备上，1个设备独立像素需要使用4个物理像素展示，因为宽高各为2倍。&/p&&h2&设备独立像素与CSS像素&/h2&&p&上一小节介绍的设备像素比（dpr），通常指物理像素和设备独立像素的比例，我们知道，CSS像素最终是需要转换为物理像素展示的，那么CSS像素如何对应物理像素呢？&/p&&ol&&li&根据前文设备独立像素小节所介绍，在具体设备上，设备独立像素与物理像素的比例是固定的；&/li&&li&在PC端，通常设备独立像素和CSS像素比例是1:1，CSS像素能以正常比例转换为物理像素展示；&/li&&li&在移动端，为了更好的展现页面，默认情况下会进行缩放，这时设备独立像素和CSS像素比例并不是1:1，所以CSS像素与物理像素的比例就变了，所以我们看到的效果就变了；&/li&&li&当我们使用viewport meta明确设置视口&code&width&/code&为理想视口时，视口宽度单位为设备独立像素，同时设置&code&intial-scale=1.0&/code&即表明将CSS像素和设备独立像素比例设置为1.0，那么CSS像素到物理像素的转换就能很好的展现我们的UI了。&/li&&/ol&&h2&UI度量（UI Dimension）&/h2&&p&计量屏幕或屏幕内某一区域大小时，我们可以说长，宽多少寸，但是寸只是一个物理长度概念，而在开发UI界面时，由于需要适配诸多不同设备，所以可衡量，可比较的UI度量则需要使用数字加抽象计量单位，我们可以称之为UI维度（UI Dimension）。&/p&&blockquote&&i&A dimension is specified with a number followed by a unit of measure&/i&&br&&i&维度使用一个数字加上一个度量单位声明，如100px，10pt，10in，10dp等。&/i&&/blockquote&&h2&英寸（IN）&/h2&&p&Inches – Based on the physical size of the screen.&/p&&p&基于屏幕物理尺寸的度量单位，&code&in&/code&。&/p&&h2&UI像素（PX）&/h2&&p&UI像素px，是一个相对单位，与之相对的是设备像素（device pixels）。一个px在不同设备上可能对应不同的物理像素数或（点），这取决于设备像素比（device pixel ratio）。开发页面时，经常使用该单位定义UI的布局和内容尺寸，文字大小，可以在浏览器中实现像素展示良好的UI界面。&/p&&p&但是由于不同设备上使用px单位时不会根据设备屏幕大小进行自适应，尤其是PC和移动端差别比较大，所以一般响应式界面较少用px单位。&/p&&h2&磅（PT）&/h2&&p&磅，pt，即point，是印刷行业常用单位，等于1/72英寸，它是长度单位，是绝对大小，而px则是相对大小。&/p&&h2&PX与PT&/h2&&p&前面说了，px是相对大小，pt是绝对大小，所以在不同设备上，他们的关系可能不同，以Android设备为例，&code&一个dp等于160dpi屏幕上的一个物理像素&/code&，则：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&1dp = 1 ／ 160 inch
&/code&&/pre&&/div&&p&而结合前面介绍的pt单位：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&1pt = 1 / 72 inch
&/code&&/pre&&/div&&p&对于240PPI的屏幕，则：&/p&&ol&&li&&code&1dp = 1 / 160 inch = 240 / 160 px = 1.5物理像素&/code&；&/li&&li&&code&1px = 1 / 240 inch&/code&；&/li&&li&&code&1pt = 0.35物理像素 = 0.35 / dpr CSS像素(px)&/code&；&/li&&/ol&&h2&EM&/h2&&p&em是在web文档中使用的一个缩放单位，1em等于最近父元素的&code&font-size&/code&字体尺寸，如最近父元素字体为14pt，则&code&1em=14pt&/code&。使用em单位表示的尺寸可以较好的在多终端浏览器进行样式适配。&/p&&h2&REM&/h2&&p&rem也是一个缩放单位，与em相似，都是基于字体尺寸，不同的是rem是基于文档根元素字体尺寸，而与父元素字体尺寸无关，如文档根元素&code&&html&&/code&font-size属性为12pt，而最近父元素字体为14pt，则&code&1rem=12pt&/code&。&/p&&p&由于rem基于根元素字体大小计算，所以在文档中，任何一处使用rem单位计算基准都一样，使得尺寸计算得到统一，而前面的em则在文档中都是基于最近父元素&code&font-size&/code&属性值，这说明在&code&font-size&/code&值不同的父元素中使用em单位，计算并不能统一，这也是为什么在目前的PC，移动端多设备适配方案中，rem比em更常见。&/p&&h2&百分比（%）&/h2&&p&还有一个%百分比单位，基于最近父元素的相关属性尺寸，乘以分配的百分比数，如父元素width为10pt，font-size：14pt，则width：10%就是1pt，font-size: 110%为15.4pt（浏览器实际渲染会化为整数渲染）。特别注意的是&code&margin,padding&/code&属性值为百分比时，是基于当前元素width值的。&/p&&p&%单位也是一个缩放单位，所以也常用于样式适配。&/p&&h2&视口（viewport）&/h2&&p&在实现响应式设计之前，我们还需要了解一些视口相关概念。&/p&&p&&b&视口(viewport）&/b&，即可视区域的大小，指浏览器窗口内的内容区域，不包含工具栏、标签栏等，也就是网页实际显示的区域。&/p&&h2&视口类型&/h2&&p&在开发移动端wap应用时，为了开发体验更友好的界面，需要了解更多视口相关概念，通常将视口分为三种：视觉视口，布局视口，理想视口。&/p&&h2&视觉视口（VISUAL VIEWPORT）&/h2&&p&visual viewport定义如：&/p&&blockquote&&i&The visual viewport is the part of the page that’s currently shown on screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport。&/i&&br&&i&视觉视口是指当前屏幕上页面的可见区域。用户可以滚动来改变当前页面可见部分，或者缩放来改变视觉视口的尺寸。&/i&&/blockquote&&p&visual viewport默认可以通过&code&window.innerWidth&/code&来获取，另外用户可以通过缩放来改变visual viewport的尺寸，缩小时，visual viewport值变大，放大时，visual viewport值变小。&/p&&p&在目前新的&a href=&https://link.zhihu.com/?target=https%3A//wicg.github.io/visual-viewport/index.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&草案文档&/a&中，已经定义了&code&window.visualViewport&/code&API可以获取视觉窗口对象，在Chrome61以上即可访问：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&console.log(window.visualViewport.width);
&/code&&/pre&&/div&&p&&code&window.visualViewport&/code&对象属性如：&/p&&p&&b&&code&visualViewport&/code&属性说明&/b&&code&offsetLeft&/code&视觉视口与布局视口左边界的间距以CSS pixels表示；&code&offsetTop&/code&视觉视口与布局视口上边界的间距以CSS pixels表示；&code&pageLeft&/code&视觉视口左边界和文档左边线的偏移距离，以CSS pixels表示；&code&pageTop&/code&视觉视口上边界和文档上边线的偏移距离，以CSS pixels表示；&code&width&/code&视觉视口的宽度，以CSS pixels表示；&code&height&/code&视觉视口的高度，以CSS pixels表示；&code&scale&/code&缩放比例，比如文档被放大2被，则返回值 &code&2&/code&. 这个值不受设备像素比&code&devicePixelRatio&/code&的影响。&/p&&h2&布局视口（LAYOUT VIEWPORT）&/h2&&p&layout viewport的定义如下：&/p&&blockquote&&i&In the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.&/i&&br&&i&在CSS布局中，比如百分比宽度是相对于布局视口来计算的，布局视口通常比视觉视口宽。&/i&&/blockquote&&p&layout viewport宽度可以通过&code&document.documenElement.clientWidth&/code&或&code&document.body.clientWidth&/code&来获取。&/p&&p&为什么说布局视口通常比视觉视口宽呢，看图很容易理解：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-ef971ce1203ecdf9302c9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&544& data-rawheight=&738& class=&origin_image zh-lightbox-thumb& width=&544& data-original=&https://pic1.zhimg.com/v2-ef971ce1203ecdf9302c9_r.jpg&&&/figure&&p&&br&&/p&&p&&b&当给定文档内容宽度大于视觉窗口宽度时，会出现如图情况，视觉视口就是屏幕内文档可见区域，而布局视口则包括文档不可见区域，只有滚动才能查看其内容。&/b&&/p&&p&通常浏览器默认设置布局视口为&b&980px或1024px&/b&，所以通常你会看到它大于设备屏幕可视区域，尤其是在移动设备上，另外从上面给的多种实例图片可以看出顶部&code&position:fixed&/code&导航栏，始终跟随布局视口，&code&width: 100%&/code&对应的是布局视口宽度。&/p&&h2&理想视口（IDEAL VIEWPORT）&/h2&&blockquote&&i&理想视口，是指设备的屏幕尺寸，单位为设备独立像素（虚拟像素，实际会被转换为物理像素展示）。&/i&&/blockquote&&p&ideal viewport宽度可以使用&code&screen.width&/code&来获取，其值是由设备决定，是对设备来说最理想的布局视口尺寸。如，iphone5理想视口为&code&320&/code&，iphone6为&code&375&/code&，IPhone7plus为&code&414&/code&。&/p&&p&&b&这里设置视口为设备独立像素，那如何与UI使用的CSS像素匹配呢？首先设备独立像素和物理像素的比例在具体某台设备上是固定的，然后我们知道设备独立像素和CSS像素都是虚拟单位，在PC端，通常设备独立像素和CSS像素比例是1:1，CSS像素能以正常比例转换为物理像素展示；但是在移动端，为了更好的展现页面，默认情况下会进行缩放将内容调整为适合屏幕的大小，这时设备独立像素和CSS像素比例并不是1:1，所以CSS像素与物理像素的比例就变了，所以我们看到的效果就变了，当我们使用viewport meta明确设置视口width为理想视口时，视口宽度单位为设备独立像素，同时设置intial-scale=1.0即表明将CSS像素和设备独立像素比例设置为1.0，那么CSS像素到物理像素的转换就能很好的展现我们的UI了。&/b&&/p&&h2&viewport meta&/h2&&p&在现在的移动端网页中，我们经常可以看到这么一句代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&meta name=&viewport&, width=device-width, initial-scale=1.0&
&/code&&/pre&&/div&&p&&code&device-width&/code&返回的就是设备的&code&ideal viewport&/code&宽度，这句代码就是声明当前布局使用设备理想视口宽度，在这种情况下，以iphone6理想视口为&code&375&/code&为例，html设置&code&width: 100%&/code&，最终得到的宽度就是&code&320px&/code&。&/p&&p&对于未设置&code&meta&/code&元视口代码的页面，在移动端访问时，布局视口为默认值&code&980px&/code&，文档被缩小以完全展示内容，此时CSS像素与物理像素的比例变大，即一物理像素展示更多CSS像素，展示效果如图：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-2a237fc83dd5f64bdd865f00c68e505a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&515& data-rawheight=&759& class=&origin_image zh-lightbox-thumb& width=&515& data-original=&https://pic3.zhimg.com/v2-2a237fc83dd5f64bdd865f00c68e505a_r.jpg&&&/figure&&p&&br&&/p&&p&此时&code&visualViewport&/code&对象信息如下：&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-2badcaece4c36b4dddaef_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&884& data-rawheight=&249& class=&origin_image zh-lightbox-thumb& width=&884& data-original=&https://pic2.zhimg.com/v2-2badcaece4c36b4dddaef_r.jpg&&&/figure&&p&&br&&/p&&h2&视口与布局&/h2&&p&在iphone之前，都是通过调整内容，适配PC端网站使其在手机浏览器上也可以友好访问；后来iphone提出在“虚拟窗口”（视口）上展现网页内容，并提供viewport元信息元素以控制虚拟窗口大小。&/p&&p&在桌面浏览器中，浏览器窗口宽度就是我们CSS布局时，能使用的最大宽度，如果内容宽度超出视口宽度，则会出现滚动条，以查看所有内容；在移动浏览器中则不同，我们可以额外使用viewport控制视口以满足展示需求。&/p&&h2&默认布局视口&/h2&&p&如下对于一个PC网站，PC端正常展示如下：&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-783afafda8d9c0fcd5324170cfb5f211_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1387& data-rawheight=&567& class=&origin_image zh-lightbox-thumb& width=&1387& data-original=&https://pic2.zhimg.com/v2-783afafda8d9c0fcd5324170cfb5f211_r.jpg&&&/figure&&p&&br&&/p&&p&而在移动端默认情况下，展示如图：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-2a237fc83dd5f64bdd865f00c68e505a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&515& data-rawheight=&759& class=&origin_image zh-lightbox-thumb& width=&515& data-original=&https://pic3.zhimg.com/v2-2a237fc83dd5f64bdd865f00c68e505a_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&我们给文档html，body宽度设置为&code&width:100%&/code&，所以html，body的宽度是&code&980px&/code&，这是&b&浏览器默认设置的布局视口宽度&/b&；&/li&&li&默认，移动端浏览器布局视口为980px，然后根据页面内容进行&b&缩放&/b&以使页面内容能在当前可视窗口完全展示；当明确设置宽度width时：&/li&&ol&&li&若width大于980：我们设置html等元素&code&width: 1200px&/code&后，视口将缩小布局以支持更多CSS像素，即一个物理像素将对应更多CSS像素，视觉上看就是页面被缩小了，这也验证了CSS像素只是一个虚拟像素；&/li&&/ol&&/ol&&figure&&img src=&https://pic4.zhimg.com/v2-a564bb652db4f2ac86bf2c32e6ba348c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&483& data-rawheight=&749& class=&origin_image zh-lightbox-thumb& width=&483& data-original=&https://pic4.zhimg.com/v2-a564bb652db4f2ac86bf2c32e6ba348c_r.jpg&&&/figure&&p&&br&&/p&&ol&&ol&&li&若width小于980：我们设置html等元素&code&width: 400px&/code&后，内容在视口的一部分展示，剩余部分空白，视觉上并没有被缩放，只是在更小的区域展示，导致文本换行，高度增加；&/li&&/ol&&/ol&&figure&&img src=&https://pic4.zhimg.com/v2-e37d1e5b06c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&501& data-rawheight=&748& class=&origin_image zh-lightbox-thumb& width=&501& data-original=&https://pic4.zhimg.com/v2-e37d1e5b06c_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&i&比较特殊的是&code&position:&/code&定位的顶部导航栏元素，其始终对应于布局视口。&/i&&/p&&h2&添加META&/h2&&p&加入给页面添加元视口代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&meta name=&viewport& content=&width=device-width,initial-scale=1.0&
&/code&&/pre&&/div&&p&添加如上代码后，明确设置布局视口为理想视口宽度，这样浏览器就能完美展示我们的页面，页面也不会被缩放处理。当然，我们设置元素样式时，其宽度便不能超过该布局视口宽度，对于iphone6，为&code&375px&/code&；如果超出则会出现滚动条。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-1e7ec3f310c8050d16ba_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&491& data-rawheight=&499& class=&origin_image zh-lightbox-thumb& width=&491& data-original=&https://pic1.zhimg.com/v2-1e7ec3f310c8050d16ba_r.jpg&&&/figure&&p&&br&&/p&&h2&CSS3 媒体查询（media query）&/h2&&p&CSS3 中的 Media Queries 增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。如：&/p&&ol&&li&视口宽度大于 800px 的纵向显示屏，加载特定css文件：&/li&&/ol&&p&&code&&&b&link&/b&&/code& &code&rel=&stylesheet&&/code& &code&media=&screen and (orientation: portrait) and (min-width:&br&800px)&&/code& &code&href=&800wide-portrait-screen.css& /&&/code& &/p&&ol&&li&打印设备特定css文件：&/li&&/ol&&p&&code&&&b&link&/b&&/code& &code&rel=&stylesheet&&/code& &code&type=&text/css&&/code& &code&media=&print&&/code& &code&href=&print.css& /&&/code& &/p&&ol&&li&视口在375和600之间，设置特定字体大小18px：&/li&&/ol&&p&&code&@&b&media&/b& screen (min-width: 375px) and (max-width: 600px) {&br&&b&body&/b& {&br&&b&font-size&/b&: 18&br& }&br&}&br&&/code&&/p&&h2&响应式实现基础&/h2&&p&响应式设计实现通常会从以下几方面思考：&/p&&ol&&li&组合流式布局、弹性盒子（包括图片、表格、视频）和媒体查询等技术；&/li&&li&使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围；&/li&&li&使用相对单位使得内容自适应调节；&/li&&li&选择断点，针对不同断点实现不同布局和内容展示；&/li&&/ol&&h2&响应式设计模式&/h2&&p&目前，响应式设计实践大致可总结为五类：mostly fluid、column drop、layout shifter、tiny tweaks 和 off canvas，通常，我们选择其中的某一种或几种组合实现我们的响应式UI。&/p&&h2&微调式（Tiny Tweaks）&/h2&&p&Tiny Tweaks布局模式主要表现为单一列展示大部分内容，随着视口宽的的增加，改变&code&font-size&/code&值和&code&padding&/code&间距，以保证内容的持续可读性。&/p&&blockquote&&i&微调式针对单列布局，简单的修改字体大小，padding和margin间距，保证内容可读性。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-f8c6f1b1e892b499abe026_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1074& data-rawheight=&302& class=&origin_image zh-lightbox-thumb& width=&1074& data-original=&https://pic4.zhimg.com/v2-f8c6f1b1e892b499abe026_r.jpg&&&/figure&&p&&br&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.c1 {
padding: 10
width: 100%;
@media (min-width: 600px) {
padding: 20
font-size: 1.5
@media (min-width: 960px) {
padding: 40
font-size: 2
&/code&&/pre&&/div&&h2&浮动式（Mostly Fluid）&/h2&&p&Mostly Fluid布局是一种多列布局，在大屏幕上设置较大&code&margin&/code&，但是在移动端则会浮动后续列，垂直堆叠排列。该模式很常见，因为通常只需要设置一个断点。&/p&&blockquote&&i&浮动式布局，精髓在于浮动，随着屏幕缩小，浮动后续列，通常float／flex + width然后使用media query设置不同width值实现。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-36d5cf43d73e4bbe80248c1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1060& data-rawheight=&774& class=&origin_image zh-lightbox-thumb& width=&1060& data-original=&https://pic2.zhimg.com/v2-36d5cf43d73e4bbe80248c1_r.jpg&&&/figure&&p&&br&&/p&&p&以如下html结构为例：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!--Pattern HTML--&
&div id=&pattern& class=&pattern&&
&div class=&c&&
&div class=&main&&
&h2&Main Content (1st in source order)&/h2&
&div class=&c2&&
&h3&Column (2nd in source order)&/h3&
&div class=&c3&&
&h3&Column (3nd in source order)&/h3&
&!--End Pattern HTML--&
&/code&&/pre&&/div&&p&其样式通常有如下方式：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.main {
background-color: #8e352e;
background-color: #c84c44;
background-color: #a53d36;
@media screen and (min-width: 37.5em) {
.c2, .c3 {
width: 50%;
&/code&&/pre&&/div&&p&当屏幕宽度大于31.42em，浏览器默认font-size为16px，则为&code&37.5 * 16 = 600&/code&px，大于600px像素时下面两个div则浮动并列显示，否则垂直堆叠展示。&/p&&h2&断列式（Column Drop）&/h2&&p&Column Drop也是一种多列布局方式，在移动端垂直堆叠排列，随着屏幕增大将各列平铺排列，这种模式就需要我们选择多个断点并选择变化列。&/p&&blockquote&&i&断列士核心是将内容划分为多列，然后随着屏幕变小，依次将左／右列断开堆叠至主列下方。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f55f8ade781becfa6d40aeb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1036& data-rawheight=&752& class=&origin_image zh-lightbox-thumb& width=&1036& data-original=&https://pic3.zhimg.com/v2-f55f8ade781becfa6d40aeb_r.jpg&&&/figure&&p&&br&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!--Pattern HTML--&
&div id=&pattern& class=&pattern&&
&div class=&c&&
&div class=&main&&
&h2&Main Content (1st in source order)&/h2&
&div class=&sb&&
&h3&Column (2nd in source order)&/h3&
&div class=&sb-2&&
&h3&Column (3nd in source order)&/h3&
&!--End Pattern HTML--&
&/code&&/pre&&/div&&p&样式如：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.main {
background-color: #8e352e;
background-color: #c84c44;
background-color: #a53d36;
@media screen and (min-width: 42em) {
width: 75%;
padding: 0 1em 0 0;
width: 25%;
@media screen and (min-width: 62em) {
width: 50%;
margin-left: 25%;
padding: 0 1
margin-left: -75%;
width: 25%;
&/code&&/pre&&/div&&h2&移位式（Layout Shifter）&/h2&&p&Layout Shifter响应式设计是指针对不同屏幕进行不同布局和内容展示，通常需要设置多个断点，然后针对不同大小屏幕，进行不同设计，和前面几种模式在处理小屏幕时自动将后面列往下堆叠不同，在每类断点之间都需要涉及布局和内容两者的修改；这意味着我们需要做更多的编码工作，当然我们的可控性也更强。&/p&&blockquote&&i&移位式核心在于确定不同屏幕需要何种布局及内容展示方式，然后在各断点使用media query进行控制。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-cfb81cef6a0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1012& data-rawheight=&518& class=&origin_image zh-lightbox-thumb& width=&1012& data-original=&https://pic3.zhimg.com/v2-cfb81cef6a0_r.jpg&&&/figure&&p&&br&&/p&&h2&分屏式（Off Canvas）&/h2&&p&在这之前的四种设计思路都是在大屏铺开展示，然后随着屏幕缩小，将其余列垂直堆叠展示，用户需要上下滚动才能查看页面所有内容，而Off Canvas模式则换了一个思路：分屏：&/p&&ol&&li&在小屏幕设备，将不常用或非主要的内容（如导航和菜单之类）放在屏幕外左右两侧，点击可以切换显示／隐藏；&/li&&li&在大屏幕可选择性的铺开展示；&/li&&/ol&&blockquote&&i&分屏式精华是划分主要内容（如文章列表）和非主要内容（如导航栏），然后优先展示主要内容，非主要内容可以在左右两侧隐藏，支持用户主动点击／滑动切换显示／隐藏。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0c7b41ca2ef503c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1072& data-rawheight=&608& class=&origin_image zh-lightbox-thumb& width=&1072& data-original=&https://pic4.zhimg.com/v2-0c7b41ca2ef503c_r.jpg&&&/figure&&p&&br&&/p&&p&通常的做法是，在小屏幕，设置不常用内容&code&display:&/code&或&code&transform: translate(-200px, 0);&/code&，然后点击打开按钮时，添加恢复样式&code&display:&/code&或&code&transform: translate(0, 0);&/code&，即可展示；在大屏幕则可选择性设计展示方式，通常是直接平铺。&/p&&h2&响应式实现&/h2&&p&理论知识基本准备的差不多了，接下来实现一个简单的例子。&/p&&h2&设置视口&/h2&&p&在html内添加元视口代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&/code&&/pre&&/div&&ol&&li&&code&width=device-width&/code& 指定视口为理想视口，以便使用当前视口（设备独立像素为单位）能展现良好的页面；&/li&&li&&code&initial-scale=1&/code& 指定将 CSS 像素与设备独立像素比例设为 1:1。&/li&&/ol&&p&&code&intial-scale=1.0&/code& 即阻止移动浏览器自动调整页面大小 ，浏览器将按照视口的实际大小（此处设置为理想视口）来渲染页面。&/p&&p&当然还可以通过CSS@viewport方式声明，与meta标签效果相同：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&@viewport {
width: device-
&/code&&/pre&&/div&&p&&i&其中，zoom属性等同于 viewport meta 标签的 initial-sacale 属性。&/i&&/p&&h2&媒体查询&/h2&&p&当前各主流浏览器基本都支持meida query，但是如果你期望网站在IE8甚至以下版本也展示良好，则需要添加兼容，可以用 media-queries.js 或 respond.js：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!--[if lt IE 9]&
&script src=&//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&&&/script&
&![endif]--&
&/code&&/pre&&/div&&h2&设置断点（breakpoints）&/h2&&p&响应式设计还有一个重要的问题是如何确定视图断点，是以设备为依据吗？当然不行，设备是无穷无尽的，最好的实践是以内容为依据，然后从移动设备开始，从小到大依次增加一屏展示内容，确定我们期望的多个视图断点及布对应设计UI。&/p&&p&以material-ui为例，分为：&/p&&ol&&li&&b&xs&/b&, extra-small: & 0&/li&&li&&b&sm&/b&, small: &= 600&/li&&li&&b&md&/b&, medium: &= 960&/li&&li&&b&lg&/b&, large: &= 1280&/li&&li&&b&xl&/b&, xlarge: &= 1920&/li&&/ol&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-886c44da1c370f530ccb56678e0dbbb9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2320& data-rawheight=&1024& class=&origin_image zh-lightbox-thumb& width=&2320& data-original=&https://pic4.zhimg.com/v2-886c44da1c370f530ccb56678e0dbbb9_r.jpg&&&/figure&&p&&br&&/p&&p&可以自由选择断点并使用media query设置响应式布局，如：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&/* for 1280px or less */
@media screen and (max-width: 1280px) {
#pagewrap {
width: 95%;
#content {
width: 65%;
#sidebar {
width: 30%;
/* for 960px or less */
@media screen and (max-width: 960px) {
#content {
#sidebar {
/* for 600px or less */
@media screen and (max-width: 600px) {
font-size: 0.8
#sidebar {
&/code&&/pre&&/div&&p&当然这并不意味着我们只能使用这几个断点，也许我们希望在特定情况下，进行一些特定处理：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&@media (min-width: 360px) {
font-size: 1
&/code&&/pre&&/div&&h2&相对单位&/h2&&p&既然是响应式设计，需要实现响应式视图，那么固定值的长度单位就必然很难满足期望；如果使用固定单位，如&code&px&/code&，则需要针对每一种情况进行不同处理，多了很多工作，否则就无法实现响应式。&/p&&p&例如，给在容器div设置&code&width: 100%;&/code&可以确保其填充视口宽度，相对视口而言不会太大也不会太小，无论设备是宽度为320像素的 iPhone5、宽度为375像素的iPhone6，还是宽度为360像素的 Nexus 5，div 均会适应于这些设备屏幕；此外，使用相对单位可以自动调整内容尺寸空间，而不会出现横向滚动条的情况。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.wrap {
width: 320
font-size: 20
// 相对单位
width: 100%;
font-size: 1.25
&/code&&/pre&&/div&&p&相对单位有百分比（%），em，rem等。&/p&&h2&响应式文本&/h2&&p&针对网站可读性的调研发现，阅读体验友好段落行内应该包含 70 到 100 个字符，通常是8-15个英文单词，20-50个中文汉字，所以需要针对视图断点进行控制：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&width: 100%;
padding: 10
@media screen (max-width: 600px) {
.article {
width: 100%;
papdding: 15
font-size: 1
@media screen (min-width: 600px) and (max-width: 960px) {
.article {
max-width: 700
margin-left: 0
&/code&&/pre&&/div&&p&如上，在较小的屏幕上，大小为1rem的字体可以使每行完美地呈现约20-30中文，而在较大的屏幕上就需要添加断点了，如，当浏览器宽度超过 600px，则内容理想宽度是100%，最大理想宽度是700px。&/p&&h2&响应式图片&/h2&&p&因为布局是响应式的，所以图片也需要根据布局进行响应式展现。&/p&&h2&弹性图片布局&/h2&&p&首先在布局上，我们的图片肯定需要随着布局变更而弹性变化，所以不能设置固定尺寸，通常使用相对单位，设置如下样式：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.img-wrap {
width: 100%;
img { max-width: 100%; }
&/code&&/pre&&/div&&p&设置宽度100%，宽度自适应，不设置高度，图片高度将按照图片分辨率比例自适应，于是，图片便可以自动跟随容器缩放良好展现。&/p&&p&同时我们也有必要为图片容器设置最大宽度，避免出现图片拉伸过大，损失质量的情况：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.img-wrap {
max-width: 200
&/code&&/pre&&/div&&h2&图片响应式&/h2&&p&是不是这样就结束了呢？当然不是，通常，PC端需要使用大尺寸图片展现，但是在移动端限于带宽和网络流量原因，必然不适合使用大尺寸图，图片内容也需要响应式，我们应该为不同的屏幕尺寸提供不同的图片，为大屏幕准备大尺寸图片，小屏幕准备尺寸更小的清晰图片，另外高分辨率 (2x, 3x) 显示屏上高分辨率图片可保证清晰度。&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b5fe5b449b970a72bddd0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1230& data-rawheight=&632& class=&origin_image zh-lightbox-thumb& width=&1230& data-original=&https://pic3.zhimg.com/v2-b5fe5b449b970a72bddd0_r.jpg&&&/figure&&p&&br&&/p&&h2&srcset&/h2&&p&&code&srcset&/code& 属性增强了 &code&img&/code& 元素的行为，我们可以针对不同设备提供不同尺寸图片。类似于 CSS 原生的 &code&image-set&/code& &a href=&https://link.zhihu.com/?target=https%3A//developers.google.com/web/fundamentals/design-and-ux/responsive/images%23use-image-set-to-provide-high-res-images& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS 函数&/a&，&code&srcset&/code& 也允许浏览器自动根据设备特性选择最佳图像，例如，在 2x 显示屏上使用 2x 图像。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&img src=&photo.png& srcset=&photo@2x.png 2x& /&
&/code&&/pre&&/div&&p&在不支持 &code&srcset&/code& 的浏览器上，浏览器需使用 &code&src&/code& 属性指定的默认图像文件，所以需要始终包含一个在任何设备上都能显示的默认图像。如果 &code&srcset&/code& 受支持，则会在进行任何请求之前对逗号分隔的图片条件列表进行解析，并且只会下载和显示默认图片。&/p&&p&当然该方式目前兼容性实在不乐观，比较少使用。&/p&&h2&艺术方向（PICTURE）&/h2&&p&艺术方向是指使用 &code&picture&/code& 元素，根据设备特性选择特定图像。 &code&picture&/code& 元素支持声明式方式定义，根据设备大小、设备分辨率、屏幕方向等不同特性来提供一个图片的多尺寸版本：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&picture&
&source media=&(max-width: 599px)& srcset=&profile-s.png&&
&source media=&(min-width: 600px)& srcset=&profile-600w.png&&
&img src=&profile-600w.png& alt=&Progile&&
&/picture&
&/code&&/pre&&/div&&ol&&li&&code&picture&/code&元素包含了&code&source&/code&元素列表，浏览器可以根据当前设备特性选择特定源图片，然后需要声明一个&code&img&/code&元素提供默认图片；&/li&&li&&code&&source&&/code&元素包含一个&code&media&/code&属性，该属性是一个媒体条件，根据这个条件决定显示哪张图片，从上至下，遇到匹配条件为真，则显示对应图片。在如上实例，若视口宽度不超过599px，则显示第一个&code&&source&&/code&元素&code&srcset&/code&指定的图片，若视窗宽度大于或等于600px，则显示第二张图片；&/li&&li&&code&srcset&/code&属性包含要显示图片的路径。请注意，正如我们在&code&&img&&/code&上面看到的那样，&code&&source&&/code&可以使用引用多个图像的&code&srcset&/code&属性，还有&code&sizes&/code&属性。所以支持通过一个 &code&&picture&&/code&元素提供多个图片，也可以给每个图片提供多分辨率的图片，不过通常需求比较少；&/li&&li&最后一点需要注意的是，我们应该总是在 &code&&/picture&&/code&前面提供一个&code&&img&&/code&元素以及它的&code&src&/code&和&code&alt&/code&属性，否则不会有图片显示，并且当媒体条件都不匹配时，会加载&code&img&/code&提供的图片，；另外，如果浏览器不支持 &code&&picture&&/code&元素，也会默认使用该&code&img&/code&元素替换；&/li&&/ol&&p&更多关于响应式图片信息可以查阅&a href=&https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&参考资料&/a&。&/p&&h2&总结&/h2&&p&本文主要介绍了响应式设计相关理论基础，包括：屏幕尺寸，物理，CSS像素等相关概念，视口，响应式设计基础，常见设计模式，及响应式UI实现基本思路等，目前最常见的多屏适配rem方式，博主计划后续继续介绍。&/p&&h2&参考&/h2&&ol&&li&&a href=&https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/Apps/Progressive/Responsive/responsive_design_building_blocks& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Responsive Design&/a&&/li&&li&&a href=&https://link.zhihu.com/?target=https%3A//developers.google.com/web/fundamentals/design-and-ux/responsive/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Respinsive Web Design&/a&&/li&&li&&a href=&https://link.zhihu.com/?target=https%3A//www.quirksmode.org/mobile/viewports.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&A tale of two viewports&/a&&/li&&li&&a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Display_size& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Display Size&/a&&/li&&li&&a href=&https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Viewport Meta tag&/a&&/li&&/ol&
是否还在为你的应用程序适配PC端，移动端，平板而苦苦思索呢，是否在寻找如何一套代码适配多终端方式呢，是否希望快速上手实现你的跨终端应用程序呢，是的话，那就看过来吧，本文阐述响应式UI设计相关理论基础，包括：屏幕尺寸，物理，设备独立，CSS像素，d…
&figure&&img src=&https://pic3.zhimg.com/v2-cebe94e16e30f5e15d50_b.jpg& data-rawwidth=&553& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&https://pic3.zhimg.com/v2-cebe94e16e30f5e15d50_r.jpg&&&/figure&&p&&b&前言&/b&&/p&&p&近日，某某龙在2018年的一次会议上发表了一个演讲，4000多人聚集在现场玩“跳一跳”游戏。随着他们指尖的翻飞跳跃，大屏幕上的现场排名也在不断刷新……而在全场的惊叹声中，最高分出现了，967分！而这位最高分得主，就是某某龙本人。&/p&&p&在随后的演讲中，某某龙也表示，这款DAU在一点几个亿的小游戏，网上居然出现了非常多的外挂。笔者以“跳一跳”为关键词在全球最大的同性社交平台github上进行搜索，居然有650个搜索结果。这些外挂，大多数都是以图像识别为基础的游戏辅助程序。利用这些外挂，玩家们可以很轻松的跳到几千分，甚至上万分。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f274dcf576f5cb324e72b64_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&400& data-rawheight=&586& class=&content_image& width=&400&&&/figure&&p&&br&&/p&&p&&b&同样，在日举办的阿里游戏云“棋牌X安全”技术分享沙龙的活动现场，阿里巴巴集团安全部专家陵轩也对游戏从业者深恶痛绝的外挂问题进行了详细的解读，并针对反外挂提出了阿里的最新解决方案。&/b&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-cebe94e16e30f5e15d50_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&553& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&https://pic3.zhimg.com/v2-cebe94e16e30f5e15d50_r.jpg&&&/figure&&p&&br&&/p&&p&阿里游戏云“棋牌X安全”技术分享沙龙活动现场&/p&&p&&br&&/p&&p&陵轩在活动中提到，作为一款社交平台上的小游戏，如果外挂泛滥，一方面，看到朋友使用外挂打出了一个很高的分数，那么朋友之间的信任可能会出现问题；另一方面，外挂行为会破坏整个游戏的规则，并且让规则立即失效。基于这两方面，最终导致的就是正常玩家的流失，游戏面临衰败和死亡。&/p&&p&比如，一个正常玩家，在不断练习之后，每局的分数应该是会缓慢增长的，如果某个时间段突然增加了几千分甚至几万分，这本身就已经很不正常了。&/p&&p&&br&&/p&&p&&b&外挂的种类&/b&&/p&&p&根据外挂的实现原理，以及对游戏正常业务造成的危害程度，我们对外挂大致可以分为如下三大类：&b&辅助型、修改内存型、破解型&/b&。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5c4c5c50eb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&639& data-rawheight=&352& class=&origin_image zh-lightbox-thumb& width=&639& data-original=&https://pic2.zhimg.com/v2-5c4c5c50eb_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&辅助型&/b&&/p&&p&这类外挂对游戏和业务的影响相对比较小，本身不会修改和破解游戏的代码，主要是模拟用户点击，自动化的做一些重复性的操作。比较常见的是图像识别和按键精灵等工具。通过图像识别技术，可以判断人物当前的位置、火车票余量等；然后通过按键精灵模拟用户点击，达到人物在游戏中的走动、自动购买火车票等操作。&/p&&p&最火的案例莫过于现在的直播答题场景了。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-8f5cb6ffd6b2abcf05db00_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&324& data-rawheight=&493& class=&content_image& width=&324&&&/figure&&p&&br&&/p&&p&外挂程序通过OCR识别出题目的文字，然后通过搜索引擎检索答案，最后自动化点击题目的答案，做到全自动化答题，并且准确率还很高。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-3a8c06aa5bf9914336dbf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&656& data-rawheight=&334& class=&origin_image zh-lightbox-thumb& width=&656& data-original=&https://pic1.zhimg.com/v2-3a8c06aa5bf9914336dbf_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&修改内存型&/b&&/p&&p&修改内存型外挂依托于官方游戏APP，属于动态修改游戏业务逻辑，这类外挂往往会向游戏进程中注入第三方恶意模块，然后通过修改代码的逻辑、修改内存中的数值等手段达到修改游戏地理位置、人物奔跑加速、破解收费道具、修改游戏币数量和增加血量等。此类外挂会极大的破坏游戏的平衡性。&/p&&p&如下是“XX酷跑”的游戏外挂，属于典型的内存修改类外挂程序。此外挂程序会往游戏进程中注入第三方模块，然后通过修改游戏的代码逻辑和内存中的数值，可以随意改变游戏的飞行距离、奖励的倍数、奔跑的速度等参数。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-757cc25bbb34e64ba92a9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&649& data-rawheight=&359& class=&origin_image zh-lightbox-thumb& width=&649& data-original=&https://pic1.zhimg.com/v2-757cc25bbb34e64ba92a9_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&破解型&/b&&/p&&p&破解型游戏外挂对于游戏厂商来说影响是最大的，不仅会破坏游戏的平衡性，更会加速游戏业务走向衰亡。&/p&&p&&b&破解型外挂又分为两类：二次打包和脱机外挂。&/b&&/p&&p&&br&&/p&&p&APP的二次打包是基于对官方APP的修改，属于静态修改代码逻辑。黑客们通过逆向分析游戏逻辑，修改游戏赖以生存的核心功能，比如去除游戏中的广告代码，破解单机游戏的收费逻辑，插入盗号代码等。&/p&&p&如下是《XX那三国》游戏的二次打包版本，其中被插入了“一键跳过”副本、游戏对话速度可调至3倍速等外挂功能。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a2437d56_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&400& data-rawheight=&711& class=&content_image& width=&400&&&/figure&&p&&br&&/p&&p&脱机外挂的出现对游戏厂商来说是毁灭性的打击，这意味着游戏客户端和服务器端通信的逻辑都已经被黑客逆向的非常清楚了，所有的游戏操作都可以脱离游戏客户端而通过脚本来实现。&/p&&p&脱机外挂的危害也显而易见的，首先，原本属于游戏客户端的广告、道具等收入没有了；其次，脚本操作比正常的客户端操作要快很多很多，极大的破坏了游戏的平衡性。当年PC时代最为火爆的《传奇》游戏，很大程度上也是没落于脱机外挂的出现。&/p&&p&如下是《狼人杀》游戏的批量注册小号工具，黑客通过逆向游戏注册逻辑和算法，编写PC端自动化注册工具，完全脱离游戏客户端APP，属于典型的脱机外挂。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1adbe2e34b128c93a6c96b5669375fbc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1303& data-rawheight=&520& class=&origin_image zh-lightbox-thumb& width=&1303& data-original=&https://pic4.zhimg.com/v2-1adbe2e34b128c93a6c96b5669375fbc_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&外挂难防&/b&&/p&&p&作为一名游戏行业反外挂领域多年的从业者，陵轩也在现场对外挂的存在原因，防控难度及外挂的分类等进行了详细的分析。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a4e5b4d429d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&553& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&https://pic4.zhimg.com/v2-a4e5b4d429d_r.jpg&&&/figure&&p&阿里巴巴集团安全部专家 陵轩&/p&&p&&br&&/p&&p&&b&游戏外挂问题，不仅仅只在微信“跳一跳”小游戏中出现，它更是一个手游行业普世存在的、并且不能被忽视的严重问题。那么，这些外挂究竟是如何产生的呢？&/b&&/p&&p&&b&首先&/b&，相较PC时代的C++游戏客户端，现在的手机游戏基本上都是以脚本语言为主。由于脚本语言的特性，游戏的开发成本降低了，迭代周期缩短了，但也同样面临容易被反编译、篡改破解等问题。&/p&&p&&b&第二&/b&，以往在PC时代被广泛使用的游戏驱动保护，到了移动时代由于手机的限制，也同样不能用了。这就导致了黑客可以有Root、越狱等超级权限，而游戏则只有普通的用户权限，这种攻防对抗层面的权限不对等，也是移动端外挂难防的一个很重要原因。这就好比我是一个拿菜刀的屠夫面对一群拿AK47的恐怖分子一个道理，根本没法打。&/p&&p&&b&第三&/b&，出于对手机网络的不稳定，以及流量使用等原因的考虑，很多手机游戏的计算逻辑和过程都在客户端进行，这就导致了黑客可以很容易的篡改客户端进行游戏作弊，比如，直接跳过某些游戏关卡、BOSS一击毙命等。&/p&&p&&b&第四&/b&，手游时代对外挂工作室来说，作弊成本低。一台主流PC机可以虚拟出几十个模拟器；作弊工具产业链成熟，包括IP代理商，卡商猫池、打码平台、群控软件等。&/p&&p&&b&第五&/b&，游戏开发同学通常缺乏安全对抗经验，无法及时发现和阻断外挂的使用和传播。&/p&&p&&br&&/p&&p&&b&谁在使用外挂？&/b&&/p&&p&&b&随着移动互联网的兴起，同时，手游行业制作外挂的成本低，导致更多的外挂制作者从PC纷纷向移动端转变，这就导致了手游外挂的泛滥。那么，究竟是哪些人会使用外挂呢？&/b&&/p&&p&&b&第一类：&/b&虚荣心作祟的玩家。在游戏中，玩家们可以沙场驰骋、江湖侠情，在现实中失意的人们可以再游戏中得到慰藉，使得心灵愉悦。那么，如何才能花更少的钱，得到更大的心灵慰藉呢？唯有借助外挂的力量，可以在战场上杀更多的人，比分比别人高。&/p&&p&&b&第二类：&/b&打金工作室。对于打金工作室来说，游戏币的产量是直接关系到变现的。使用外挂可以自动化的执行游戏中的一些重复性劳动，比如固定的主线任务、跑商、押镖等。而且，在外挂的帮助下，可以24小时全程无人值守，大大提供游戏币的产出量。&/p&&p&&b&第三类：&/b&竞争对手。通过对官方游戏逆向分析，竞争公司可以很容易的通过换肤等手段，制造一款玩法相近、界面类似的新游戏；另外，竞争对手还会使用外挂批量注册小号，来破坏游戏的正常运营。&/p&&p&&br&&/p&&p&&b&通用的检测和防御机制&/b&&/p&&p&&b&游戏外挂的实现方式多样，危害也都各不相同，那么游戏厂商又该如何对不同种类的外挂做针对性的防护呢？&/b&&/p&&p&&b&第一步：客户端APP的防护。&/b&客户端在外发之后，最终到了正常玩家手里还是黑产手里，这块是不可控的，那么如何提高黑客分析客户端代码的成本，保护端上代码的安全是头等大事。我们可以对游戏脚本进行加密处理，对于解密游戏脚本的核心代码逻辑进行代码混淆、加固，反外挂从提升攻防门槛开始，一个保护机制相对完善的客户端，虽然不能杜绝外挂，但能在一定程度上将大部分跃跃欲试的黑客阻挡在外。&/p&&p&&b&第二步：通信链路的防护。&/b&脱机外挂的产生，很大程度上是因为客户端APP和服务器端通信的签名算法、加密算法被破解了。采用常规加解密算法的变形算法，以及保护好核心秘钥至关重要，采用白盒加密不失为一种好的对策。&/p&&p&&b&第三步：业务层及时防控。&/b&云端业务层通过实时的各种IP库、手机库的查询、人机模型算法以及离线的数据分析等。从服务器端及时发现和防控已知和未知的作弊方案，为业务及时止损。被黑客攻击并不可怕，可怕的是不知道被攻击，允许黑客一小段时间的作恶，换取绝大多数用户的安全，是业界通用的做法，快速发现问题并解决问题才是治理外挂的核心。&/p&&p&&br&&/p&&p&&b&物美价廉的解决方案&/b&&/p&&p&基于前面的介绍，手机游戏外挂的制作难度和成本极低，外挂的制作者又都是专业的黑产从业人员；另一方面，对于游戏厂商来说，普通游戏开发者一般都更关注游戏功能逻辑的实现和开发，本身缺乏安全技术和游戏攻防对抗经验。因此，游戏厂商想要及时的发现并阻断外挂作恶相对来说比较困难，从投入产出比来看，成本也相对偏高。&/p&&p&定制的解决方案研发和维护成本过高，但通用的又担心效果不好。是不是能有一个折中的方案呢？答案是肯定的。其实，攻防对抗是一个两军对垒人和人、人和机器博弈的过程，一下子把门槛提升太多是不合时宜的，就像一下子改一个大版本着急大不一样，这个是得不偿失的。利用前面提到的分层而治，就能取得一个比较好的事半功倍的效果。&/p&&p&&b&阿里云游戏安全解决方案，从云（云端业务层）、管（通信链路层）、端（游戏客户端APP）全链路防检测并防控游戏外挂。经过多年双11的攻防演练，阿里巴巴业务风控体系具备及时发现黑产的“眼睛”，为游戏厂商及时止损。&/b&&/p&&p&阿里游戏云“棋牌X安全”技术分享沙龙还在继续，更多会议内容及资讯内容敬请关注阿里聚安全公众号或官方博客。&/p&&p&&br&&/p&&p&&a href=&https://link.zhihu.com/?target=http%3A//weixin.qq.com/r/6kUbAxXEFkhprVFg9xD4& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&weixin.qq.com/r/6kUbAxX&/span&&span class=&invisible&&EFkhprVFg9xD4&/span&&span class=&ellipsis&&&/span&&/a& (二维码自动识别)&/p&&p&&/p&
前言近日，某某龙在2018年的一次会议上发表了一个演讲，4000多人聚集在现场玩“跳一跳”游戏。随着他们指尖的翻飞跳跃，大屏幕上的现场排名也在不断刷新……而在全场的惊叹声中，最高分出现了，967分！而这位最高分得主，就是某某龙本人。在随后的演讲中，…
&figure&&img src=&https://pic4.zhimg.com/v2-b8cdbf1606fbb4a66d75bd4_b.jpg& data-rawwidth=&595& data-rawheight=&335& class=&origin_image zh-lightbox-thumb& width=&595& data-original=&https://pic4.zhimg.com/v2-b8cdbf1606fbb4a66d75bd4_r.jpg&&&/figure&&blockquote&本文整理自RTC大会，陈功的演讲《网页端实时音视频服务架构与实践》。&/blockquote&&h2&1、分享者&/h2&&p&（本文同步发布于：&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&52im.net/thread-1282-1-&/span&&span class=&invisible&&1.html&/span&&span class=&ellipsis&&&/span&&/a&）&/p&&p&&b&陈功：&/b&负责网页端音视频通信技术架构。毕业于中国科学技术大学，Ph.D。原英特尔服务器事业部多媒体架构师，主导基于WebRTC的视频会议解决方案搭建。曾任职Marvell视频事业部，研究多媒体系统框架，参与Google TV, OTT等项目。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-630a497a845_b.jpg& data-size=&normal& data-rawwidth=&1280& data-rawheight=&853& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic1.zhimg.com/v2-630a497a845_r.jpg&&&figcaption&▲ 本文分享者：陈功&/figcaption&&/figure&&h2&2、网页端的实时音视频的特点&/h2&&p&&b&网页端的实时音视频有什么特点：&/b&&/p&&ul&&li&&b&首先-在浏览器端：&/b&&br&依赖于浏览器获取音视频的能力，以及强大的网页上的渲染能力，所以，就能够为高清的通信体验打下基础。同时，相比移动端来说，屏幕比较大，视窗选择也比较灵活；&/li&&li&&b&第二-跨平台：&/b&&br&大家都了解浏览器对各个终端的特殊性，不止PC上有浏览器、移动端上有浏览器，甚至是一些知名的社交APP也嵌入了浏览器。这需要一个跨平台的体验，现在支持WebRTC的浏览器也越来越多了，这也是网页实时通信的一个特点；&/li&&li&&b&第三-免安装，方便接入：&/b&&br&随着WebRTC的普及，它不需要安装任何插件就可以实现网页端的实时通信。&br&&/li&&/ul&&h2&3、网页端实时通信可以应用在什么场景&/h2&&p&首先是直播，直播非常火。直播的主播端会有需求，在网页端进行开播，因为网页端的屏幕比较大、视频比较清晰、处理能力比较强。同时，也非常有意思，我们一个客户也在用我们网页端的SDK做直播的监控。大家也知道，直播开播的房间数很多，在一个网页上可以监控40-50个房间，来做直播的巡视员，用网页端的实时音视频SDK是比较方便的。&/p&&p&另外一个是在线教育，在线教育的老师端一般都在PC上，如果要安装应用程序，有些老师也不是很懂电脑技术，要去配置的话就比较麻烦。如果有网页端免安装的方案的话，他们用起来的话，用户体验也会比较好。在线教育除了音视频，还要求有屏幕共享、白板，因为都是H5的技术，所以与Web端的SDK集成起来的话也会非常方便。&/p&&p&最后就是视频会议，大家在公司里用过浏览器的视频会议的话都会有体验，HR发一个链接，某一个时间点你点这个链接，除此之外还有一些说明，你要安装哪些东西，这个会比较复杂。现在有了免安装的WebRTC之后，大家对视频会议的体验也会上升一个台阶。这边列的这几个是比较典型的场景，其实还有远程医疗、企业协作之类的。&/p&&h2&4、从技术上看，网页端的实时通信是否已经成熟？是否已经准备好了？&/h2&&figure&&img src=&https://pic2.zhimg.com/v2-4d1bea85011c8_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&610& data-rawheight=&210& class=&origin_image zh-lightbox-thumb& width=&610& data-original=&https://pic2.zhimg.com/v2-4d1bea85011c8_r.jpg&&&/figure&&p&如果说到网页端、浏览器端的实时通信的话，大家首先会想到的就是Webex，它的体验是非常不错的，也培养了一大群目标用户，让用户认知到在浏览器上就可以进行视频的沟通，打开了一个市场。但是，它有一个缺点，就是必须安装浏览器的插件和扩展程序，和GoToMeeting是一样的，非常不方便。另一种做法是，在PC上安装一个应用程序，通过这个程序来代理获取、处理音视频的流，网页端只是做渲染和展示。
&/p&&p&在很长一段时间里，这些网页端的用户觉得这个技术就是这样的，体验就是这样的，无法提升了。直到2011年，WebRTC技术的出现，并且由谷歌做推广。WebRTC带来的体验是因为免安装才受到了关注。现在在差不多6年的发展时间里，其实也有很多的质疑声，比如，Google的项目会不会半途而废，各大浏览器厂商会不会不支持这种打通浏览器生态的想法。&/p&&h2&5、WebRTC是否已经成熟，是否可以产品化？&/h2&&p&&b&5.1 WebRTC浏览器支持情况&/b&&/p&&p&首先，来看一下目前知识WebRTC浏览器和平台的情况。&/p&&p&最早支持WebRTC的是Firefox和Chrome，之后是Opera，跟随者chrome支持WebRTC，它们内核是一样的。微软前两年提出了一个ORTC的协议，跟WebRTC有些相似。ORTC发展并不顺利，现在在edge中开始支持WebRTC。近期苹果更新了IOS系统之后，Safari 11也开始支持WebRTC了。在安卓平台上，其实很早就开始支持了WebRTC。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-7e46cd79bd8_b.jpg& data-size=&normal& data-rawwidth=&570& data-rawheight=&259& class=&origin_image zh-lightbox-thumb& width=&570& data-original=&https://pic1.zhimg.com/v2-7e46cd79bd8_r.jpg&&&figcaption&▲ WebRTC的浏览器支持情况&/figcaption&&/figure&&p&如上图所示，我们看一下这几个浏览器在市场上的占有情况，不难看出，现在除了占百分之8点几的IE之外不支持，其他的其实都已经支持了。&/p&&p&我们再从协议栈的角度来看一下。WebRTC 1.0 Spec已经基本定稿了，除了一些比较细节的问题还没有最终确认。各个浏览器对标准的支持也越来越好。虽然谷歌自己也在推广这个技术，但是谷歌自己的浏览器Chrome对WebRTC 1.0的支持并不是很好，这是因为谷歌在内部对WebRTC做了很多实验性的东西。Chrome团队对外声称，会在今年底，完全跟上WebRTC 1.0的标准。&/p&&p&&b&5.2 WebRTC的开源社区现状&/b&&/p&&p&&b&另外一个方面，看一下开源社区，举几个比较典型的开源项目：&/b&&/p&&ul&&li&Kurento：它是功能比较强大的一个多媒体处理框架，支持WebRTC协议栈。它可以作为Media server，后台有转码的能力，并且有OpenCV处理能力；&/li&&li&Licode：可以作为WebRTC的轻量通信平台，是纯转发的服务器处理模式；&/li&&li&Janus：可以作为WebRTC通信网关，比较轻量；&/li&&li&React-Native-WebRTC：值得关注的是React-Native-WebRTC，现在越来越多的开发者开始转向前端，JS。这种情况在国外更为普遍。在开源社区上出现了这么一个项目，封装了一个WebRTC的模块，开发者就可以很方便的在手机上来实现带有实时通信能力、兼容WebRTC的应用。&br&&/li&&/ul&&p&&b&5.3 WebRTC生态圈&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-86fdd01c96_b.jpg& data-size=&normal& data-rawwidth=&508& data-rawheight=&788& class=&origin_image zh-lightbox-thumb& width=&508& data-original=&https://pic4.zhimg.com/v2-86fdd01c96_r.jpg&&&figcaption&▲ WebRTC的生态圈&/figcaption&&/figure&&p&市场分析对WebRTC非常看好，预计到2022年市场规模将达到64.9亿美金。总的来说，WebRTC技术现在处在一个最好的时代。&/p&&h2&6、如何能够构建起一个WebRTC的系统？&/h2&&p&对于开发者来说，如何用这个技术、如何能够构建起一个WebRTC的系统？其实是有一段必经之路。&/p&&p&我们知道WebRTC的底层是基于P2P连接，是点对点的通信。很多开发者上手的时候，都会去做P2P质量的检验。比如说一个公司的产品经理告诉开发人员说“现在WebRTC很火，你给我整一个WebRTC的系统。”八成的开发人员会交付这样一个网状结构WebRTC的架构。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-59defd0d2ebb_b.jpg& data-size=&normal& data-rawwidth=&639& data-rawheight=&232& class=&origin_image zh-lightbox-thumb& width=&639& data-original=&https://pic2.zhimg.com/v2-59defd0d2ebb_r.jpg&&&figcaption&▲ WebRTC的P2P模型&/figcaption&&/figure&&p&那么，完全基于点对点之间通信的架构有什么特点？延时会比较小。但是，有一个很大的缺点。这种点对点音视频流的传递，每一个用户都要给另外一个用户传自己的视频流，这样对它上行带宽的压力很大。并且，每一路视频流都是独立进行采集编码，这对浏览器端编码压力的考验也很大。有人会问，能不能只采集一次编码，然后就把这个流发给不同的终端接收者？很遗憾，这是不行的。因为WebRTC的协议是做端到端的质量策略优化，所以它有一些策略调整，都是端对端的RTCP来实现，必须要经过多次的编码，然后分别传输给不同的接收者。&/p&&p&右下角的表格列的是一个权威的行业机构统计的目前在互联网上使用WebRTC的系统架构，纯P2P的只占19%。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ad3d2b2dc599a20aff21987c_b.jpg& data-size=&normal& data-rawwidth=&659& data-rawheight=&274& class=&origin_image zh-lightbox-thumb& width=&659& data-original=&https://pic3.zhimg.com/v2-ad3d2b2dc599a20aff21987c_r.jpg&&&figcaption&▲ WebRTC的通信架构占比&/figcaption&&/figure&&p&如果按刚才介绍的这个架构，开发人员交付给产品的话，肯定会打回来的，因为大家都知道，上行带宽非常宝贵，也非常受限。为了解决这个问题，开发人员会做一些深度的研究，发现领域内的WebRTC架构其实中间加了一个点，这个点就是服务器，典型的媒体服务器只做多路流的转发，不做后台的媒体处理和转码。&/p&&p&上节提到的Janus和Licode开源项目都可以实现转发媒体服务器的功能。它的特点是，每个终端用户只要上传一路流到中间服务器，节省了带宽。同时SFU只是做转发，所以对延时的影响相对比较小。弊端是，如果有两路接收者，下行带宽的能力不一样，一个是500K，一个是2m，由于源端发送者只送一路流，所以就很难适配多路的终端。&/p&&p&改成纯转发的媒体服务器之后，它还有一些弊端，开发人员又会想办法说，我在中间这个节点加上混流的功能。大家也可以从这个架构当中看出来，在服务器端收到不同的两路视频流之后，会分别做解码、拼接合成、编码。根据不同接收者的带宽情况，分别给不同的接收者发送不同profile的视频流。这就解决了，如果是多个接收端的用户，无法做到带宽的适配。这个缺点也很明显，中间做转码必然带来延时，其次是转码服务器的成本很高，但是，确实}
今日: 0|昨日: 116|帖子: 936852|会员: 137320|欢迎新会员:
说字论语汉典说字最新文章
[][][][][][][][][]
汉典论语最新主题
昨天&14:04
主题: 22, 帖数: 944
主题: 4554, 帖数: 1万
主题: 2050, 帖数: 1万
主题: 6, 帖数: 98
主题: 8万, 帖数: <span title="万
主题: 3万, 帖数: 3万
主题: 52, 帖数: 359
主题: 131, 帖数: 1668
主题: 8286, 帖数: <span title="万
主题: 2903, 帖数: 1万
主题: 472, 帖数: 8473
主题: 6726, 帖数: 4万
主题: 156, 帖数: 2429
主题: 143, 帖数: 3209
主题: 294, 帖数: 3553
主题: 135, 帖数: 1732
主题: 49, 帖数: 827
主题: 86, 帖数: 525
主题: 101, 帖数: 655
主题: 34, 帖数: 225
主题: 18, 帖数: 550
主题: 43, 帖数: 290
主题: 50, 帖数: 496
主题: 64, 帖数: 204
主题: 460, 帖数: 7978
主题: 3690, 帖数: 2万
主题: 1057, 帖数: 7764
主题: 275, 帖数: 1807
主题: 326, 帖数: 4822
主题: 20, 帖数: 80
主题: 1万, 帖数: <span title="万
主题: 1万, 帖数: 9万
主题: 781, 帖数: 2万
主题: 3521, 帖数: 2万
主题: 12, 帖数: 99
主题: 56, 帖数: 486
主题: 2万, 帖数: <span title="万
主题: 5, 帖数: 180
主题: 1176, 帖数: 1万
主题: 47, 帖数: 507
今天是日祝下列会员生日快乐
- 总计 197 人在线
- 最高记录是 8615 于 .
Copyright &
&&all rights reserved&figure&&img src=&https://pic4.zhimg.com/v2-94c1ad8e5add_b.jpg& data-rawwidth=&1164& data-rawheight=&873& class=&origin_image zh-lightbox-thumb& width=&1164& data-original=&https://pic4.zhimg.com/v2-94c1ad8e5add_r.jpg&&&/figure&&h2&识别知乎验证码&/h2&&p&最近在爬知乎的数据，遇到了验证码，就使用TensorFlow的CNN训练了一个能自动识别验证码的模型，最后识别线上验证码的准确率在95%左右。
&/p&&h2&依赖库&/h2&&ol&&li&Python3&/li&&li&requests&/li&&li&PIL & numpy&/li&&li&TensorFlow&/li&&li&CNN&/li&&/ol&&h2&分析&/h2&&p&做爬虫请求知乎接口频繁时，会遇到两种验证码：细字体和粗字体。
&/p&&figure&&img src=&https://pic3.zhimg.com/v2-c62fbb72d1daeed_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&442& data-rawheight=&460& class=&origin_image zh-lightbox-thumb& width=&442& data-original=&https://pic3.zhimg.com/v2-c62fbb72d1daeed_r.jpg&&&/figure&&p&如果把两种验证码混合放到同一个神经网络中训练的话，收敛会比较慢，需要的样本量就比较大，如果手上样本量不够多，我们可以先训练一个分类器，将两种验证码区分开，再分别去训练识别，这样需要的样本量就会少很多而且每个分类准确率都能得到保证！&/p&&p&最开始我样本量不够时就是是按照上面的做法实现的，现在样本足够了就可以把两种验证码在样本混合起来直接丢到CNN里训练就好了，最后也达到不错的准确率！&/p&&hr&&p&&b&代码链接在文末。&/b&&/p&&h2&如何运行 &/h2&&ol&&li&把你的验证码样本放到&code&samples&/code&目录下的&code&train_mixed_captcha_base64.txt&/code&文件中。&/li&&li&训练模型：运行&code&train&/code&目录下的&code&model.py&/code&文件，直到达到你满意的准确率为止。这时训练好的网络结构和权重值会保存在&code&checkpoints&/code&目录下。 &/li&&li&恢复上一步训练好的网络模型，导出&code&predict_captcha&/code&预测函数。&/li&&li&传入base64编码的图片字符串，执行&code&predict_captcha&/code&函数，得到预测结果。&/li&&li&Boom！想干嘛你就可以干嘛了！&/li&&/ol&&hr&&h2&CNN&/h2&&p&代码中的模型使用TensorFlow构建了一个简单的卷积神经网络。&/p&&p&包含：&b&一个输入层&/b&、&b&三个卷积层&/b&+&b&池化层&/b&和最后一个&b&全连接层&/b&。&/p&&p&至于网络模型为什么是这种结构，因为：&b&前人根据经验总结出来这种结构训练的效果会比较好&/b&。&/p&&p&当然你也可以尝试其他的结构，只要效果好就行了。我们都是&b&黑盒调参&/b&的。
&/p&&p&&br&&/p&&p&使用&b&TensorBoard&/b&可以可视化训练的关情况。 &/p&&p&给大家看一下我训练的&b&网络结构&/b&：
&/p&&figure&&img src=&https://pic4.zhimg.com/v2-85df26e1dabcc9dbd940ecff_b.jpg& data-size=&small& data-rawwidth=&1006& data-rawheight=&1090& class=&origin_image zh-lightbox-thumb& width=&1006& data-original=&https://pic4.zhimg.com/v2-85df26e1dabcc9dbd940ecff_r.jpg&&&figcaption&网络结构&/figcaption&&/figure&&p&&br&&/p&&p&&b&准确率走势图&/b&：
&/p&&figure&&img src=&https://pic2.zhimg.com/v2-6951657ff_b.jpg& data-size=&small& data-rawwidth=&1030& data-rawheight=&770& class=&origin_image zh-lightbox-thumb& width=&1030& data-original=&https://pic2.zhimg.com/v2-6951657ff_r.jpg&&&figcaption&准确率曲线&/figcaption&&/figure&&p&&br&&/p&&p&&b&loss曲线&/b&：
&/p&&figure&&img src=&https://pic4.zhimg.com/v2-aa34f33345cbe2fb247ac2f_b.jpg& data-size=&small& data-rawwidth=&1072& data-rawheight=&760& class=&origin_image zh-lightbox-thumb& width=&1072& data-original=&https://pic4.zhimg.com/v2-aa34f33345cbe2fb247ac2f_r.jpg&&&figcaption&loss曲线&/figcaption&&/figure&&p&&br&&/p&&p&&b&最后&/b&，使用训练好的模型&b&Cover&/b&到知乎线上的验证码平均识别准确率在95%左右，也就是两次至少命中一次的概率为：1 - 0.05*0.05 = 99.75%，够我用啦然后……你懂的！&/p&&p&&br&&/p&&p&&b&源码地址&/b&：&a href=&https://link.zhihu.com/?target=https%3A//github.com/lonnyzhang423/zhihu-captcha& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&github.com/lonnyzhang42&/span&&span class=&invisible&&3/zhihu-captcha&/span&&span class=&ellipsis&&&/span&&/a&&/p&&hr&&p&&b&UPDATE&/b&&/p&&p&知乎最近升级了验证码服务，换成腾讯的滑块验证码，如下图：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-9e5bf2dfdeb4c2e5a90632_b.jpg& data-caption=&& data-size=&small& data-rawwidth=&806& data-rawheight=&752& class=&origin_image zh-lightbox-thumb& width=&806& data-original=&https://pic2.zhimg.com/v2-9e5bf2dfdeb4c2e5a90632_r.jpg&&&/figure&&p&之前的字符验证码样本就再次分享出来给大家学习使用吧！这下应该没人举报了吧&/p&&p&关注公众号：&b&Python实验课 ，&/b& 后台回复：&b&知乎验证码
&/b&获取百度云链接。&/p&&p&&br&&/p&&p&&b&UPDATE&/b&&/p&&p&写了一个api给大家测试预测的效果&/p&&p&&b&地址&/b&：&a href=&https://link.zhihu.com/?target=http%3A//47.96.150.119/api/toolkit/captcha& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&47.96.150.119/api/toolk&/span&&span class=&invisible&&it/captcha&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&b&方法&/b&：POST&/p&&p&&b&参数&/b&：img_base64&/p&&p&&br&&/p&&p&我自己用Postman测试效果还是可以的&/p&&figure&&img src=&https://pic1.zhimg.com/v2-5b72e2b8f5afff7066ac0_b.jpg& data-caption=&& data-size=&small& data-rawwidth=&1356& data-rawheight=&978& class=&origin_image zh-lightbox-thumb& width=&1356& data-original=&https://pic1.zhimg.com/v2-5b72e2b8f5afff7066ac0_r.jpg&&&/figure&&p&&/p&
识别知乎验证码最近在爬知乎的数据，遇到了验证码，就使用TensorFlow的CNN训练了一个能自动识别验证码的模型，最后识别线上验证码的准确率在95%左右。 依赖库Python3requestsPIL & numpyTensorFlowCNN分析做爬虫请求知乎接口频繁时，会遇到两种验证码：细字…
&p&是否还在为你的应用程序适配PC端，移动端，平板而苦苦思索呢，是否在寻找如何一套代码适配多终端方式呢，是否希望快速上手实现你的跨终端应用程序呢，是的话，那就看过来吧，本文阐述响应式UI设计相关理论基础，包括：屏幕尺寸，物理，设备独立，CSS像素，dpr，视口等相关概念，还有响应式设计基础，常见设计模式，及响应式UI实现基本思路，希望能加深对响应式的理解和实践思路。&/p&&a href=&https://link.zhihu.com/?target=http%3A//blog.codingplayboy.com//responsive-web-design/& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic2.zhimg.com/v2-045e29f994be703ada4e58d15bf41ff5_ipico.jpg& data-image-width=&558& data-image-height=&480& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&浅谈响应式Web设计与实现思路 - 熊建刚的博客&/a&&h2&响应式（Responsive）&/h2&&p&响应式是什么呢？顾名思义，响应式，肯定会自动响应，响应什么？应用程序是在终端屏幕窗口中展示给用户，被用户访问的，那么就是响应屏幕的变化，不同终端屏幕尺寸大小不一致，需要针对不同尺寸屏幕进行不同的展示响应。&/p&&blockquote&&i&&b&响应式（Responsive web design, RWD）&/b&，是指一套应用程序用户界面（User Interface）能自动响应不同设备窗口或屏幕尺寸（screen size）并且内容，布局渲染表现良好。&/i&&/blockquote&&h2&自适应（Adaptive）&/h2&&p&在响应式设计（RWD）之外，还有一种适配多设备屏幕的方式，&b&自适应设计（Adaptive web design， AWD）&/b&。&/p&&blockquote&&i&自适应设计(AWD)，是指一个应用程序使用多版本用户界面，针对不同设备屏幕，服务器端返回不同版本用户界面，供用户访问。&/i&&/blockquote&&h2&自适应vs响应式&/h2&&p&自适应和响应式设计的不同主要概括如下：&/p&&ol&&li&自适应是多套用户界面，而后者则只有一套用户界面；&/li&&li&自适应需要服务端检测请求设备分辨率相关信息，然后选择对应版本返回；&/li&&li&自适应可以在不同版本使用不同适配方案，如在PC端使用百分比，在移动端使用rem等，而响应式则需要一个完美兼容的适配方案；&/li&&li&以头条网站为例，访问&code&www.toutiao.com&/code&PC端会打开PC版本web应用，而在移动端打开，则服务端会重定向至&code&m.toutiao.com&/code&，对应的返回的就是移动端版本web应用；&/li&&/ol&&p&自然的，我们本篇要关注的自然是响应式用户界面设计，即一套应用程序适配多设备。&/p&&h2&移动优先（Mobile first）&/h2&&p&从2014年开始，移动设备使用访问率已经超过PC，所以在设计响应式页面程序时，通常都是移动优先，即先适配移动样式和布局，然后再调整适配PC端。&/p&&h2&渐进增强（Progress enhancement）&/h2&&p&另外我们知道移动设备众多，一些低版本或旧系统的设备并不支持JavaScript或CSS的新特性，如es6，media query等，所以通常实现一个基础版本，在大部分设备能满足基本功能后，针对性兼容的添加新功能，新特性，逐步拓展应用，这就是渐进增强。&/p&&h2&屏幕（screen）&/h2&&p&前面讲响应式就是响应屏幕尺寸，那么屏幕尺寸如何衡量呢？主要从尺寸单位，设备独立像素和像素密度等角度考虑。&/p&&h2&物理尺寸（Display size ／Physical size）&/h2&&p&屏幕物理尺寸，指根据屏幕对角线（diagonal）测量的实际物理尺寸，就像我们通常说的屏幕是多少寸的，是5.1还是5.5，平板是10.1，电视是42还是37寸，这里的寸都指（英寸），而且是以对角线长度计量的。&/p&&p&对角线长度，则可以根据三角公式，由宽和高计算得出：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-045e29f994be703ada4e58d15bf41ff5_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&558& data-rawheight=&480& class=&origin_image zh-lightbox-thumb& width=&558& data-original=&https://pic1.zhimg.com/v2-045e29f994be703ada4e58d15bf41ff5_r.jpg&&&/figure&&p&&br&&/p&&h2&逻辑尺寸（Logic size ／Display resolution）&/h2&&p&和屏幕物理尺寸相对的则有逻辑尺寸概念，或者叫它展示分辨率（resolution），而和物理尺寸以长度inch为单位不同，逻辑尺寸则以像素（pixel）为单位计量。&/p&&h2&DIMENSION&/h2&&p&和物理尺寸以对角线为方向计量屏幕大小不同的是，逻辑尺寸分别从横向（宽），纵向（高）两个方向表示屏幕的尺寸：width，height。以一台&code&“1024 × 768”&/code&分辨率的笔记本为例，这表示设备屏幕的宽是1024像素，高为768像素。&/p&&h2&物理像素（device pixel）&/h2&&p&物理像素，也叫&b&设备像素&/b&，&b&实际像素&/b&，在计算机数字图像中，一个像素（pixel）或一个点（dot）是在一个光栅图片（raster image）中的一个物理点，它是图像在屏幕上展示的的最小可控制元素。&/p&&blockquote&&i&所谓的光栅（raster image）或位图（bitmapped image）图片，是指将图像定义为由点（或像素）组成，每个点（或像素）可以由多种色彩表示，包括2、4、8、16、24和32位色彩。例如，一幅分辨率的32位彩色图片，其所占存储字节数为：&code&×32/(8*KB&/code&(一字节等于8位)。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-8b02165bbac8fd8fbe2deb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&517& data-rawheight=&167& class=&origin_image zh-lightbox-thumb& width=&517& data-original=&https://pic4.zhimg.com/v2-8b02165bbac8fd8fbe2deb_r.jpg&&&/figure&&p&&br&&/p&&p&如图，将屏幕放大至一定程度，可以看见是由很多个点（或像素）组成，屏幕上的这些一个一个的点（或像素）就是我们说的&b&物理像素&/b&，而像素数量的不同及每个像素的不同色彩表示就构成图像展示，决定它的视觉表现。&/p&&h2&CSS像素（CSS Pixel）&/h2&&p&除了前面介绍的物理像素，还有一种像素经常被提及，那就是CSS像素，也作&b&逻辑像素&/b&，&b&虚拟像素&/b&，它仅仅是描述图像单元信息的概念，通常描述图像中某一个小方框所需要展示的颜色值，而这一些列方框点合起来就能描述一幅图像，web编程中用来度量网页内容尺寸或位置的就是这个&b&抽象单位&/b&。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-1f9b07ef5defee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&437& data-rawheight=&256& class=&origin_image zh-lightbox-thumb& width=&437& data-original=&https://pic2.zhimg.com/v2-1f9b07ef5defee_r.jpg&&&/figure&&p&&br&&/p&&h2&分辨率（resolution）&/h2&&p&分辨率通厂都是指设备分辨率，即设备屏幕上显示的物理像素总和，以一台&code&“1024 × 768”&/code&分辨率的笔记本为例，这表示设备屏幕的宽是1024物理像素，高为768物理像素，它展示的像素总数就是&code&&/code&。&/p&&h2&像素密度（Pixel density）&/h2&&p&屏幕上每英寸（PPI，Pixel per inch）或每厘米（PPCM，Pixel per centimeter）上拥有的&b&物理像素&/b&（或点）的数量，称为&b&像素密度&/b&，也作&b&屏幕密度&/b&，计算公式为：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&pixel density(pd) =
屏幕宽度物理像素 ／ 屏幕宽度英寸；
&/code&&/pre&&/div&&p&如一个15英寸（对角线）大小的设备，有一个12英寸宽，9英寸高的屏幕，并且其分辨率为&code&&/code&像素，则其像素密度则大概为85PPI：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&pd = 1024 ／ 12 ～= 768 ／ 9 ～= 85PPI
&/code&&/pre&&/div&&p&当然横纵方向上的像素密度并不总是相同的，如将上面例子的分辨率改为&code&&/code&，则：&/p&&ol&&li&横向：&code&pd = 1280 / 12 ~=107PPI&/code&;&/li&&li&纵向：&code&pd = 1024 / 9 ~= 114PPI&/code&;&/li&&/ol&&h2&分辨率转换为像素密度&/h2&&p&根据屏幕分辨率计算得出像素密度公式，如：&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-f43b35b0cdb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&564& data-rawheight=&266& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&https://pic4.zhimg.com/v2-f43b35b0cdb_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&&code&w&sub&p&/sub&&/code&：分辨率横向像素数；&/li&&li&&code&h&sub&p&/sub&&/code&：分辨率纵向像素数；&/li&&li&&code&d&sub&p&/sub&&/code&：对角线分辨率像素数；&/li&&li&&code&di&/code&：对角线物理尺寸（inch）；&/li&&li&&code&V&sub&pd&/sub&&/code&：像素密度，单位为PPI；&/li&&/ol&&h2&密度等级划分&/h2&&p&为简便起见，Android 将所有屏幕密度分组为六种通用密度： 低、中、高、超高、超超高和超超超高。而低密度屏幕在给定物理区域的物理像素少于高密度屏幕。&/p&&h2&点密度（DOTS PER INCH）&/h2&&p&另外我们可能还听过点密度（dots per inch，dpi），它和前面介绍的像素密度相似，通常可以交叉使用，只是描述领域不同，像素（pixel）通常在计算机视觉显示领域使用，而点（dot）则主要在打印或印刷领域中使用。&/p&&h2&设备独立像素（dp／dip）&/h2&&p&设备独立像素（device independent pixel，称为dp或dip），也叫&b&密度无关像素&/b&，是基于屏幕物理密度的抽象单位。首先由Google提出适配众多Android设备屏幕的抽象单位。在定义 UI 布局时可以使用的&b&虚拟像素&/b&单位，表示布局维度或位置。&/p&&blockquote&&i&它是一个基于计算机坐标系统的物理度量单位，并且可以将物理像素抽象为&b&虚拟像素&/b&以便在应用中使用，然后计算机内部系统可以将应用中使用的虚拟像素转换为&b&实际物理像素&/b&。&/i&&/blockquote&&p&这中抽象使得移动设备可以在不同屏幕缩放展示信息和用户交互界面，而内部图像系统可以将应用中的抽象像素度量转换为实际像素度量，因此应用可以直接使用抽象像素，而不用编码处理大量的物理像素差异化的设备。通常，安卓设备假设“中等”密度屏幕设备独立像素基准为：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&一个设备独立像素（dp／dip）等于160 dpi（或PPI） 屏幕上的一个物理像素，即等于1 / 160英寸。
&/code&&/pre&&/div&&p&而windows则定义一个设备独立像素为96dpi屏幕上的一个物理像素，即1dp等于1 ／ 96英寸；Apple系统则默认一个设备独立像素为72dpi屏幕上的一个物理像素。系统运行时，根据当前屏幕的实际密度以透明方式处理 dp 单位的任何缩放 。&/p&&h2&计算设备独立像素&/h2&&p&如何计算某一设备的设备独立像素呢？根据上面介绍可以得到dp和inch的如下等式：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-12ee4a4c7db873baaf6f0547abe19e45_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&468& data-rawheight=&130& class=&origin_image zh-lightbox-thumb& width=&468& data-original=&https://pic3.zhimg.com/v2-12ee4a4c7db873baaf6f0547abe19e45_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&&code&*ratio*&/code&：即设备系统指定的默认比例;&/li&&li&&code&inch&/code&：物理尺寸，英寸；&/li&&/ol&&p&所以可以得到dp和物理像素的转换关系：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-35a3a1a94f6dfe633f5aa_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&640& data-rawheight=&130& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-35a3a1a94f6dfe633f5aa_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&&code&V&sub&pd&/sub&&/code&：设备像素密度；&/li&&li&&code&PPI*inch&/code&：&code&pixel/inch * inch = pixel&/code&;&/li&&/ol&&p&如，当屏幕密度为240dpi（或PPI），即&code&V&sub&pd&/sub& = 240&/code&时，1 dip 则等于1.5个物理像素（pixel）。&/p&&h2&设备像素比（dpr）&/h2&&p&关于物理像素，设备独立像素或CSS像素，有一个很常见的概念，设备像素比（device pixel ratio，dpr），它描述的是使用多少实际像素渲染一个设备独立像素，它的计算方式为：&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-fd2ecab967743_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&302& data-rawheight=&116& class=&content_image& width=&302&&&/figure&&p&&br&&/p&&ol&&li&&code&N&sub&dp&/sub&&/code&: 设备屏幕实际像素数；&/li&&li&&code&N&sub&px&/sub&&/code&: 屏幕设备独立像素数（PC端通常等于CSS像素数）；&/li&&li&&code&dpr&/code&：设备像素比；&/li&&/ol&&p&在浏览器中，我们可以使用&code&window.devicePixelRatio&/code&获取其dpr值，dpr更高的设备屏幕会使用更多物理像素展示一个设备独立像素，所以其效果更细腻，更精致。如在一个dpr=2的设备上，1个设备独立像素需要使用4个物理像素展示，因为宽高各为2倍。&/p&&h2&设备独立像素与CSS像素&/h2&&p&上一小节介绍的设备像素比（dpr），通常指物理像素和设备独立像素的比例，我们知道，CSS像素最终是需要转换为物理像素展示的，那么CSS像素如何对应物理像素呢？&/p&&ol&&li&根据前文设备独立像素小节所介绍，在具体设备上，设备独立像素与物理像素的比例是固定的；&/li&&li&在PC端，通常设备独立像素和CSS像素比例是1:1，CSS像素能以正常比例转换为物理像素展示；&/li&&li&在移动端，为了更好的展现页面，默认情况下会进行缩放，这时设备独立像素和CSS像素比例并不是1:1，所以CSS像素与物理像素的比例就变了，所以我们看到的效果就变了；&/li&&li&当我们使用viewport meta明确设置视口&code&width&/code&为理想视口时，视口宽度单位为设备独立像素，同时设置&code&intial-scale=1.0&/code&即表明将CSS像素和设备独立像素比例设置为1.0，那么CSS像素到物理像素的转换就能很好的展现我们的UI了。&/li&&/ol&&h2&UI度量（UI Dimension）&/h2&&p&计量屏幕或屏幕内某一区域大小时，我们可以说长，宽多少寸，但是寸只是一个物理长度概念，而在开发UI界面时，由于需要适配诸多不同设备，所以可衡量，可比较的UI度量则需要使用数字加抽象计量单位，我们可以称之为UI维度（UI Dimension）。&/p&&blockquote&&i&A dimension is specified with a number followed by a unit of measure&/i&&br&&i&维度使用一个数字加上一个度量单位声明，如100px，10pt，10in，10dp等。&/i&&/blockquote&&h2&英寸（IN）&/h2&&p&Inches – Based on the physical size of the screen.&/p&&p&基于屏幕物理尺寸的度量单位，&code&in&/code&。&/p&&h2&UI像素（PX）&/h2&&p&UI像素px，是一个相对单位，与之相对的是设备像素（device pixels）。一个px在不同设备上可能对应不同的物理像素数或（点），这取决于设备像素比（device pixel ratio）。开发页面时，经常使用该单位定义UI的布局和内容尺寸，文字大小，可以在浏览器中实现像素展示良好的UI界面。&/p&&p&但是由于不同设备上使用px单位时不会根据设备屏幕大小进行自适应，尤其是PC和移动端差别比较大，所以一般响应式界面较少用px单位。&/p&&h2&磅（PT）&/h2&&p&磅，pt，即point，是印刷行业常用单位，等于1/72英寸，它是长度单位，是绝对大小，而px则是相对大小。&/p&&h2&PX与PT&/h2&&p&前面说了，px是相对大小，pt是绝对大小，所以在不同设备上，他们的关系可能不同，以Android设备为例，&code&一个dp等于160dpi屏幕上的一个物理像素&/code&，则：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&1dp = 1 ／ 160 inch
&/code&&/pre&&/div&&p&而结合前面介绍的pt单位：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&1pt = 1 / 72 inch
&/code&&/pre&&/div&&p&对于240PPI的屏幕，则：&/p&&ol&&li&&code&1dp = 1 / 160 inch = 240 / 160 px = 1.5物理像素&/code&；&/li&&li&&code&1px = 1 / 240 inch&/code&；&/li&&li&&code&1pt = 0.35物理像素 = 0.35 / dpr CSS像素(px)&/code&；&/li&&/ol&&h2&EM&/h2&&p&em是在web文档中使用的一个缩放单位，1em等于最近父元素的&code&font-size&/code&字体尺寸，如最近父元素字体为14pt，则&code&1em=14pt&/code&。使用em单位表示的尺寸可以较好的在多终端浏览器进行样式适配。&/p&&h2&REM&/h2&&p&rem也是一个缩放单位，与em相似，都是基于字体尺寸，不同的是rem是基于文档根元素字体尺寸，而与父元素字体尺寸无关，如文档根元素&code&&html&&/code&font-size属性为12pt，而最近父元素字体为14pt，则&code&1rem=12pt&/code&。&/p&&p&由于rem基于根元素字体大小计算，所以在文档中，任何一处使用rem单位计算基准都一样，使得尺寸计算得到统一，而前面的em则在文档中都是基于最近父元素&code&font-size&/code&属性值，这说明在&code&font-size&/code&值不同的父元素中使用em单位，计算并不能统一，这也是为什么在目前的PC，移动端多设备适配方案中，rem比em更常见。&/p&&h2&百分比（%）&/h2&&p&还有一个%百分比单位，基于最近父元素的相关属性尺寸，乘以分配的百分比数，如父元素width为10pt，font-size：14pt，则width：10%就是1pt，font-size: 110%为15.4pt（浏览器实际渲染会化为整数渲染）。特别注意的是&code&margin,padding&/code&属性值为百分比时，是基于当前元素width值的。&/p&&p&%单位也是一个缩放单位，所以也常用于样式适配。&/p&&h2&视口（viewport）&/h2&&p&在实现响应式设计之前，我们还需要了解一些视口相关概念。&/p&&p&&b&视口(viewport）&/b&，即可视区域的大小，指浏览器窗口内的内容区域，不包含工具栏、标签栏等，也就是网页实际显示的区域。&/p&&h2&视口类型&/h2&&p&在开发移动端wap应用时，为了开发体验更友好的界面，需要了解更多视口相关概念，通常将视口分为三种：视觉视口，布局视口，理想视口。&/p&&h2&视觉视口（VISUAL VIEWPORT）&/h2&&p&visual viewport定义如：&/p&&blockquote&&i&The visual viewport is the part of the page that’s currently shown on screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport。&/i&&br&&i&视觉视口是指当前屏幕上页面的可见区域。用户可以滚动来改变当前页面可见部分，或者缩放来改变视觉视口的尺寸。&/i&&/blockquote&&p&visual viewport默认可以通过&code&window.innerWidth&/code&来获取，另外用户可以通过缩放来改变visual viewport的尺寸，缩小时，visual viewport值变大，放大时，visual viewport值变小。&/p&&p&在目前新的&a href=&https://link.zhihu.com/?target=https%3A//wicg.github.io/visual-viewport/index.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&草案文档&/a&中，已经定义了&code&window.visualViewport&/code&API可以获取视觉窗口对象，在Chrome61以上即可访问：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&console.log(window.visualViewport.width);
&/code&&/pre&&/div&&p&&code&window.visualViewport&/code&对象属性如：&/p&&p&&b&&code&visualViewport&/code&属性说明&/b&&code&offsetLeft&/code&视觉视口与布局视口左边界的间距以CSS pixels表示；&code&offsetTop&/code&视觉视口与布局视口上边界的间距以CSS pixels表示；&code&pageLeft&/code&视觉视口左边界和文档左边线的偏移距离，以CSS pixels表示；&code&pageTop&/code&视觉视口上边界和文档上边线的偏移距离，以CSS pixels表示；&code&width&/code&视觉视口的宽度，以CSS pixels表示；&code&height&/code&视觉视口的高度，以CSS pixels表示；&code&scale&/code&缩放比例，比如文档被放大2被，则返回值 &code&2&/code&. 这个值不受设备像素比&code&devicePixelRatio&/code&的影响。&/p&&h2&布局视口（LAYOUT VIEWPORT）&/h2&&p&layout viewport的定义如下：&/p&&blockquote&&i&In the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.&/i&&br&&i&在CSS布局中，比如百分比宽度是相对于布局视口来计算的，布局视口通常比视觉视口宽。&/i&&/blockquote&&p&layout viewport宽度可以通过&code&document.documenElement.clientWidth&/code&或&code&document.body.clientWidth&/code&来获取。&/p&&p&为什么说布局视口通常比视觉视口宽呢，看图很容易理解：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-ef971ce1203ecdf9302c9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&544& data-rawheight=&738& class=&origin_image zh-lightbox-thumb& width=&544& data-original=&https://pic1.zhimg.com/v2-ef971ce1203ecdf9302c9_r.jpg&&&/figure&&p&&br&&/p&&p&&b&当给定文档内容宽度大于视觉窗口宽度时，会出现如图情况，视觉视口就是屏幕内文档可见区域，而布局视口则包括文档不可见区域，只有滚动才能查看其内容。&/b&&/p&&p&通常浏览器默认设置布局视口为&b&980px或1024px&/b&，所以通常你会看到它大于设备屏幕可视区域，尤其是在移动设备上，另外从上面给的多种实例图片可以看出顶部&code&position:fixed&/code&导航栏，始终跟随布局视口，&code&width: 100%&/code&对应的是布局视口宽度。&/p&&h2&理想视口（IDEAL VIEWPORT）&/h2&&blockquote&&i&理想视口，是指设备的屏幕尺寸，单位为设备独立像素（虚拟像素，实际会被转换为物理像素展示）。&/i&&/blockquote&&p&ideal viewport宽度可以使用&code&screen.width&/code&来获取，其值是由设备决定，是对设备来说最理想的布局视口尺寸。如，iphone5理想视口为&code&320&/code&，iphone6为&code&375&/code&，IPhone7plus为&code&414&/code&。&/p&&p&&b&这里设置视口为设备独立像素，那如何与UI使用的CSS像素匹配呢？首先设备独立像素和物理像素的比例在具体某台设备上是固定的，然后我们知道设备独立像素和CSS像素都是虚拟单位，在PC端，通常设备独立像素和CSS像素比例是1:1，CSS像素能以正常比例转换为物理像素展示；但是在移动端，为了更好的展现页面，默认情况下会进行缩放将内容调整为适合屏幕的大小，这时设备独立像素和CSS像素比例并不是1:1，所以CSS像素与物理像素的比例就变了，所以我们看到的效果就变了，当我们使用viewport meta明确设置视口width为理想视口时，视口宽度单位为设备独立像素，同时设置intial-scale=1.0即表明将CSS像素和设备独立像素比例设置为1.0，那么CSS像素到物理像素的转换就能很好的展现我们的UI了。&/b&&/p&&h2&viewport meta&/h2&&p&在现在的移动端网页中，我们经常可以看到这么一句代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&meta name=&viewport&, width=device-width, initial-scale=1.0&
&/code&&/pre&&/div&&p&&code&device-width&/code&返回的就是设备的&code&ideal viewport&/code&宽度，这句代码就是声明当前布局使用设备理想视口宽度，在这种情况下，以iphone6理想视口为&code&375&/code&为例，html设置&code&width: 100%&/code&，最终得到的宽度就是&code&320px&/code&。&/p&&p&对于未设置&code&meta&/code&元视口代码的页面，在移动端访问时，布局视口为默认值&code&980px&/code&，文档被缩小以完全展示内容，此时CSS像素与物理像素的比例变大，即一物理像素展示更多CSS像素，展示效果如图：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-2a237fc83dd5f64bdd865f00c68e505a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&515& data-rawheight=&759& class=&origin_image zh-lightbox-thumb& width=&515& data-original=&https://pic3.zhimg.com/v2-2a237fc83dd5f64bdd865f00c68e505a_r.jpg&&&/figure&&p&&br&&/p&&p&此时&code&visualViewport&/code&对象信息如下：&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-2badcaece4c36b4dddaef_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&884& data-rawheight=&249& class=&origin_image zh-lightbox-thumb& width=&884& data-original=&https://pic2.zhimg.com/v2-2badcaece4c36b4dddaef_r.jpg&&&/figure&&p&&br&&/p&&h2&视口与布局&/h2&&p&在iphone之前，都是通过调整内容，适配PC端网站使其在手机浏览器上也可以友好访问；后来iphone提出在“虚拟窗口”（视口）上展现网页内容，并提供viewport元信息元素以控制虚拟窗口大小。&/p&&p&在桌面浏览器中，浏览器窗口宽度就是我们CSS布局时，能使用的最大宽度，如果内容宽度超出视口宽度，则会出现滚动条，以查看所有内容；在移动浏览器中则不同，我们可以额外使用viewport控制视口以满足展示需求。&/p&&h2&默认布局视口&/h2&&p&如下对于一个PC网站，PC端正常展示如下：&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-783afafda8d9c0fcd5324170cfb5f211_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1387& data-rawheight=&567& class=&origin_image zh-lightbox-thumb& width=&1387& data-original=&https://pic2.zhimg.com/v2-783afafda8d9c0fcd5324170cfb5f211_r.jpg&&&/figure&&p&&br&&/p&&p&而在移动端默认情况下，展示如图：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-2a237fc83dd5f64bdd865f00c68e505a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&515& data-rawheight=&759& class=&origin_image zh-lightbox-thumb& width=&515& data-original=&https://pic3.zhimg.com/v2-2a237fc83dd5f64bdd865f00c68e505a_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&我们给文档html，body宽度设置为&code&width:100%&/code&，所以html，body的宽度是&code&980px&/code&，这是&b&浏览器默认设置的布局视口宽度&/b&；&/li&&li&默认，移动端浏览器布局视口为980px，然后根据页面内容进行&b&缩放&/b&以使页面内容能在当前可视窗口完全展示；当明确设置宽度width时：&/li&&ol&&li&若width大于980：我们设置html等元素&code&width: 1200px&/code&后，视口将缩小布局以支持更多CSS像素，即一个物理像素将对应更多CSS像素，视觉上看就是页面被缩小了，这也验证了CSS像素只是一个虚拟像素；&/li&&/ol&&/ol&&figure&&img src=&https://pic4.zhimg.com/v2-a564bb652db4f2ac86bf2c32e6ba348c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&483& data-rawheight=&749& class=&origin_image zh-lightbox-thumb& width=&483& data-original=&https://pic4.zhimg.com/v2-a564bb652db4f2ac86bf2c32e6ba348c_r.jpg&&&/figure&&p&&br&&/p&&ol&&ol&&li&若width小于980：我们设置html等元素&code&width: 400px&/code&后，内容在视口的一部分展示，剩余部分空白，视觉上并没有被缩放，只是在更小的区域展示，导致文本换行，高度增加；&/li&&/ol&&/ol&&figure&&img src=&https://pic4.zhimg.com/v2-e37d1e5b06c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&501& data-rawheight=&748& class=&origin_image zh-lightbox-thumb& width=&501& data-original=&https://pic4.zhimg.com/v2-e37d1e5b06c_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&i&比较特殊的是&code&position:&/code&定位的顶部导航栏元素，其始终对应于布局视口。&/i&&/p&&h2&添加META&/h2&&p&加入给页面添加元视口代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&meta name=&viewport& content=&width=device-width,initial-scale=1.0&
&/code&&/pre&&/div&&p&添加如上代码后，明确设置布局视口为理想视口宽度，这样浏览器就能完美展示我们的页面，页面也不会被缩放处理。当然，我们设置元素样式时，其宽度便不能超过该布局视口宽度，对于iphone6，为&code&375px&/code&；如果超出则会出现滚动条。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-1e7ec3f310c8050d16ba_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&491& data-rawheight=&499& class=&origin_image zh-lightbox-thumb& width=&491& data-original=&https://pic1.zhimg.com/v2-1e7ec3f310c8050d16ba_r.jpg&&&/figure&&p&&br&&/p&&h2&CSS3 媒体查询（media query）&/h2&&p&CSS3 中的 Media Queries 增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。如：&/p&&ol&&li&视口宽度大于 800px 的纵向显示屏，加载特定css文件：&/li&&/ol&&p&&code&&&b&link&/b&&/code& &code&rel=&stylesheet&&/code& &code&media=&screen and (orientation: portrait) and (min-width:&br&800px)&&/code& &code&href=&800wide-portrait-screen.css& /&&/code& &/p&&ol&&li&打印设备特定css文件：&/li&&/ol&&p&&code&&&b&link&/b&&/code& &code&rel=&stylesheet&&/code& &code&type=&text/css&&/code& &code&media=&print&&/code& &code&href=&print.css& /&&/code& &/p&&ol&&li&视口在375和600之间，设置特定字体大小18px：&/li&&/ol&&p&&code&@&b&media&/b& screen (min-width: 375px) and (max-width: 600px) {&br&&b&body&/b& {&br&&b&font-size&/b&: 18&br& }&br&}&br&&/code&&/p&&h2&响应式实现基础&/h2&&p&响应式设计实现通常会从以下几方面思考：&/p&&ol&&li&组合流式布局、弹性盒子（包括图片、表格、视频）和媒体查询等技术；&/li&&li&使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围；&/li&&li&使用相对单位使得内容自适应调节；&/li&&li&选择断点，针对不同断点实现不同布局和内容展示；&/li&&/ol&&h2&响应式设计模式&/h2&&p&目前，响应式设计实践大致可总结为五类：mostly fluid、column drop、layout shifter、tiny tweaks 和 off canvas，通常，我们选择其中的某一种或几种组合实现我们的响应式UI。&/p&&h2&微调式（Tiny Tweaks）&/h2&&p&Tiny Tweaks布局模式主要表现为单一列展示大部分内容，随着视口宽的的增加，改变&code&font-size&/code&值和&code&padding&/code&间距，以保证内容的持续可读性。&/p&&blockquote&&i&微调式针对单列布局，简单的修改字体大小，padding和margin间距，保证内容可读性。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-f8c6f1b1e892b499abe026_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1074& data-rawheight=&302& class=&origin_image zh-lightbox-thumb& width=&1074& data-original=&https://pic4.zhimg.com/v2-f8c6f1b1e892b499abe026_r.jpg&&&/figure&&p&&br&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.c1 {
padding: 10
width: 100%;
@media (min-width: 600px) {
padding: 20
font-size: 1.5
@media (min-width: 960px) {
padding: 40
font-size: 2
&/code&&/pre&&/div&&h2&浮动式（Mostly Fluid）&/h2&&p&Mostly Fluid布局是一种多列布局，在大屏幕上设置较大&code&margin&/code&，但是在移动端则会浮动后续列，垂直堆叠排列。该模式很常见，因为通常只需要设置一个断点。&/p&&blockquote&&i&浮动式布局，精髓在于浮动，随着屏幕缩小，浮动后续列，通常float／flex + width然后使用media query设置不同width值实现。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-36d5cf43d73e4bbe80248c1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1060& data-rawheight=&774& class=&origin_image zh-lightbox-thumb& width=&1060& data-original=&https://pic2.zhimg.com/v2-36d5cf43d73e4bbe80248c1_r.jpg&&&/figure&&p&&br&&/p&&p&以如下html结构为例：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!--Pattern HTML--&
&div id=&pattern& class=&pattern&&
&div class=&c&&
&div class=&main&&
&h2&Main Content (1st in source order)&/h2&
&div class=&c2&&
&h3&Column (2nd in source order)&/h3&
&div class=&c3&&
&h3&Column (3nd in source order)&/h3&
&!--End Pattern HTML--&
&/code&&/pre&&/div&&p&其样式通常有如下方式：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.main {
background-color: #8e352e;
background-color: #c84c44;
background-color: #a53d36;
@media screen and (min-width: 37.5em) {
.c2, .c3 {
width: 50%;
&/code&&/pre&&/div&&p&当屏幕宽度大于31.42em，浏览器默认font-size为16px，则为&code&37.5 * 16 = 600&/code&px，大于600px像素时下面两个div则浮动并列显示，否则垂直堆叠展示。&/p&&h2&断列式（Column Drop）&/h2&&p&Column Drop也是一种多列布局方式，在移动端垂直堆叠排列，随着屏幕增大将各列平铺排列，这种模式就需要我们选择多个断点并选择变化列。&/p&&blockquote&&i&断列士核心是将内容划分为多列，然后随着屏幕变小，依次将左／右列断开堆叠至主列下方。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f55f8ade781becfa6d40aeb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1036& data-rawheight=&752& class=&origin_image zh-lightbox-thumb& width=&1036& data-original=&https://pic3.zhimg.com/v2-f55f8ade781becfa6d40aeb_r.jpg&&&/figure&&p&&br&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!--Pattern HTML--&
&div id=&pattern& class=&pattern&&
&div class=&c&&
&div class=&main&&
&h2&Main Content (1st in source order)&/h2&
&div class=&sb&&
&h3&Column (2nd in source order)&/h3&
&div class=&sb-2&&
&h3&Column (3nd in source order)&/h3&
&!--End Pattern HTML--&
&/code&&/pre&&/div&&p&样式如：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.main {
background-color: #8e352e;
background-color: #c84c44;
background-color: #a53d36;
@media screen and (min-width: 42em) {
width: 75%;
padding: 0 1em 0 0;
width: 25%;
@media screen and (min-width: 62em) {
width: 50%;
margin-left: 25%;
padding: 0 1
margin-left: -75%;
width: 25%;
&/code&&/pre&&/div&&h2&移位式（Layout Shifter）&/h2&&p&Layout Shifter响应式设计是指针对不同屏幕进行不同布局和内容展示，通常需要设置多个断点，然后针对不同大小屏幕，进行不同设计，和前面几种模式在处理小屏幕时自动将后面列往下堆叠不同，在每类断点之间都需要涉及布局和内容两者的修改；这意味着我们需要做更多的编码工作，当然我们的可控性也更强。&/p&&blockquote&&i&移位式核心在于确定不同屏幕需要何种布局及内容展示方式，然后在各断点使用media query进行控制。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-cfb81cef6a0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1012& data-rawheight=&518& class=&origin_image zh-lightbox-thumb& width=&1012& data-original=&https://pic3.zhimg.com/v2-cfb81cef6a0_r.jpg&&&/figure&&p&&br&&/p&&h2&分屏式（Off Canvas）&/h2&&p&在这之前的四种设计思路都是在大屏铺开展示，然后随着屏幕缩小，将其余列垂直堆叠展示，用户需要上下滚动才能查看页面所有内容，而Off Canvas模式则换了一个思路：分屏：&/p&&ol&&li&在小屏幕设备，将不常用或非主要的内容（如导航和菜单之类）放在屏幕外左右两侧，点击可以切换显示／隐藏；&/li&&li&在大屏幕可选择性的铺开展示；&/li&&/ol&&blockquote&&i&分屏式精华是划分主要内容（如文章列表）和非主要内容（如导航栏），然后优先展示主要内容，非主要内容可以在左右两侧隐藏，支持用户主动点击／滑动切换显示／隐藏。&/i&&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0c7b41ca2ef503c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1072& data-rawheight=&608& class=&origin_image zh-lightbox-thumb& width=&1072& data-original=&https://pic4.zhimg.com/v2-0c7b41ca2ef503c_r.jpg&&&/figure&&p&&br&&/p&&p&通常的做法是，在小屏幕，设置不常用内容&code&display:&/code&或&code&transform: translate(-200px, 0);&/code&，然后点击打开按钮时，添加恢复样式&code&display:&/code&或&code&transform: translate(0, 0);&/code&，即可展示；在大屏幕则可选择性设计展示方式，通常是直接平铺。&/p&&h2&响应式实现&/h2&&p&理论知识基本准备的差不多了，接下来实现一个简单的例子。&/p&&h2&设置视口&/h2&&p&在html内添加元视口代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&/code&&/pre&&/div&&ol&&li&&code&width=device-width&/code& 指定视口为理想视口，以便使用当前视口（设备独立像素为单位）能展现良好的页面；&/li&&li&&code&initial-scale=1&/code& 指定将 CSS 像素与设备独立像素比例设为 1:1。&/li&&/ol&&p&&code&intial-scale=1.0&/code& 即阻止移动浏览器自动调整页面大小 ，浏览器将按照视口的实际大小（此处设置为理想视口）来渲染页面。&/p&&p&当然还可以通过CSS@viewport方式声明，与meta标签效果相同：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&@viewport {
width: device-
&/code&&/pre&&/div&&p&&i&其中，zoom属性等同于 viewport meta 标签的 initial-sacale 属性。&/i&&/p&&h2&媒体查询&/h2&&p&当前各主流浏览器基本都支持meida query，但是如果你期望网站在IE8甚至以下版本也展示良好，则需要添加兼容，可以用 media-queries.js 或 respond.js：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!--[if lt IE 9]&
&script src=&//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&&&/script&
&![endif]--&
&/code&&/pre&&/div&&h2&设置断点（breakpoints）&/h2&&p&响应式设计还有一个重要的问题是如何确定视图断点，是以设备为依据吗？当然不行，设备是无穷无尽的，最好的实践是以内容为依据，然后从移动设备开始，从小到大依次增加一屏展示内容，确定我们期望的多个视图断点及布对应设计UI。&/p&&p&以material-ui为例，分为：&/p&&ol&&li&&b&xs&/b&, extra-small: & 0&/li&&li&&b&sm&/b&, small: &= 600&/li&&li&&b&md&/b&, medium: &= 960&/li&&li&&b&lg&/b&, large: &= 1280&/li&&li&&b&xl&/b&, xlarge: &= 1920&/li&&/ol&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-886c44da1c370f530ccb56678e0dbbb9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&2320& data-rawheight=&1024& class=&origin_image zh-lightbox-thumb& width=&2320& data-original=&https://pic4.zhimg.com/v2-886c44da1c370f530ccb56678e0dbbb9_r.jpg&&&/figure&&p&&br&&/p&&p&可以自由选择断点并使用media query设置响应式布局，如：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&/* for 1280px or less */
@media screen and (max-width: 1280px) {
#pagewrap {
width: 95%;
#content {
width: 65%;
#sidebar {
width: 30%;
/* for 960px or less */
@media screen and (max-width: 960px) {
#content {
#sidebar {
/* for 600px or less */
@media screen and (max-width: 600px) {
font-size: 0.8
#sidebar {
&/code&&/pre&&/div&&p&当然这并不意味着我们只能使用这几个断点，也许我们希望在特定情况下，进行一些特定处理：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&@media (min-width: 360px) {
font-size: 1
&/code&&/pre&&/div&&h2&相对单位&/h2&&p&既然是响应式设计，需要实现响应式视图，那么固定值的长度单位就必然很难满足期望；如果使用固定单位，如&code&px&/code&，则需要针对每一种情况进行不同处理，多了很多工作，否则就无法实现响应式。&/p&&p&例如，给在容器div设置&code&width: 100%;&/code&可以确保其填充视口宽度，相对视口而言不会太大也不会太小，无论设备是宽度为320像素的 iPhone5、宽度为375像素的iPhone6，还是宽度为360像素的 Nexus 5，div 均会适应于这些设备屏幕；此外，使用相对单位可以自动调整内容尺寸空间，而不会出现横向滚动条的情况。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.wrap {
width: 320
font-size: 20
// 相对单位
width: 100%;
font-size: 1.25
&/code&&/pre&&/div&&p&相对单位有百分比（%），em，rem等。&/p&&h2&响应式文本&/h2&&p&针对网站可读性的调研发现，阅读体验友好段落行内应该包含 70 到 100 个字符，通常是8-15个英文单词，20-50个中文汉字，所以需要针对视图断点进行控制：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&width: 100%;
padding: 10
@media screen (max-width: 600px) {
.article {
width: 100%;
papdding: 15
font-size: 1
@media screen (min-width: 600px) and (max-width: 960px) {
.article {
max-width: 700
margin-left: 0
&/code&&/pre&&/div&&p&如上，在较小的屏幕上，大小为1rem的字体可以使每行完美地呈现约20-30中文，而在较大的屏幕上就需要添加断点了，如，当浏览器宽度超过 600px，则内容理想宽度是100%，最大理想宽度是700px。&/p&&h2&响应式图片&/h2&&p&因为布局是响应式的，所以图片也需要根据布局进行响应式展现。&/p&&h2&弹性图片布局&/h2&&p&首先在布局上，我们的图片肯定需要随着布局变更而弹性变化，所以不能设置固定尺寸，通常使用相对单位，设置如下样式：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.img-wrap {
width: 100%;
img { max-width: 100%; }
&/code&&/pre&&/div&&p&设置宽度100%，宽度自适应，不设置高度，图片高度将按照图片分辨率比例自适应，于是，图片便可以自动跟随容器缩放良好展现。&/p&&p&同时我们也有必要为图片容器设置最大宽度，避免出现图片拉伸过大，损失质量的情况：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.img-wrap {
max-width: 200
&/code&&/pre&&/div&&h2&图片响应式&/h2&&p&是不是这样就结束了呢？当然不是，通常，PC端需要使用大尺寸图片展现，但是在移动端限于带宽和网络流量原因，必然不适合使用大尺寸图，图片内容也需要响应式，我们应该为不同的屏幕尺寸提供不同的图片，为大屏幕准备大尺寸图片，小屏幕准备尺寸更小的清晰图片，另外高分辨率 (2x, 3x) 显示屏上高分辨率图片可保证清晰度。&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b5fe5b449b970a72bddd0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1230& data-rawheight=&632& class=&origin_image zh-lightbox-thumb& width=&1230& data-original=&https://pic3.zhimg.com/v2-b5fe5b449b970a72bddd0_r.jpg&&&/figure&&p&&br&&/p&&h2&srcset&/h2&&p&&code&srcset&/code& 属性增强了 &code&img&/code& 元素的行为，我们可以针对不同设备提供不同尺寸图片。类似于 CSS 原生的 &code&image-set&/code& &a href=&https://link.zhihu.com/?target=https%3A//developers.google.com/web/fundamentals/design-and-ux/responsive/images%23use-image-set-to-provide-high-res-images& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS 函数&/a&，&code&srcset&/code& 也允许浏览器自动根据设备特性选择最佳图像，例如，在 2x 显示屏上使用 2x 图像。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&img src=&photo.png& srcset=&photo@2x.png 2x& /&
&/code&&/pre&&/div&&p&在不支持 &code&srcset&/code& 的浏览器上，浏览器需使用 &code&src&/code& 属性指定的默认图像文件，所以需要始终包含一个在任何设备上都能显示的默认图像。如果 &code&srcset&/code& 受支持，则会在进行任何请求之前对逗号分隔的图片条件列表进行解析，并且只会下载和显示默认图片。&/p&&p&当然该方式目前兼容性实在不乐观，比较少使用。&/p&&h2&艺术方向（PICTURE）&/h2&&p&艺术方向是指使用 &code&picture&/code& 元素，根据设备特性选择特定图像。 &code&picture&/code& 元素支持声明式方式定义，根据设备大小、设备分辨率、屏幕方向等不同特性来提供一个图片的多尺寸版本：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&picture&
&source media=&(max-width: 599px)& srcset=&profile-s.png&&
&source media=&(min-width: 600px)& srcset=&profile-600w.png&&
&img src=&profile-600w.png& alt=&Progile&&
&/picture&
&/code&&/pre&&/div&&ol&&li&&code&picture&/code&元素包含了&code&source&/code&元素列表，浏览器可以根据当前设备特性选择特定源图片，然后需要声明一个&code&img&/code&元素提供默认图片；&/li&&li&&code&&source&&/code&元素包含一个&code&media&/code&属性，该属性是一个媒体条件，根据这个条件决定显示哪张图片，从上至下，遇到匹配条件为真，则显示对应图片。在如上实例，若视口宽度不超过599px，则显示第一个&code&&source&&/code&元素&code&srcset&/code&指定的图片，若视窗宽度大于或等于600px，则显示第二张图片；&/li&&li&&code&srcset&/code&属性包含要显示图片的路径。请注意，正如我们在&code&&img&&/code&上面看到的那样，&code&&source&&/code&可以使用引用多个图像的&code&srcset&/code&属性，还有&code&sizes&/code&属性。所以支持通过一个 &code&&picture&&/code&元素提供多个图片，也可以给每个图片提供多分辨率的图片，不过通常需求比较少；&/li&&li&最后一点需要注意的是，我们应该总是在 &code&&/picture&&/code&前面提供一个&code&&img&&/code&元素以及它的&code&src&/code&和&code&alt&/code&属性，否则不会有图片显示，并且当媒体条件都不匹配时，会加载&code&img&/code&提供的图片，；另外，如果浏览器不支持 &code&&picture&&/code&元素，也会默认使用该&code&img&/code&元素替换；&/li&&/ol&&p&更多关于响应式图片信息可以查阅&a href=&https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&参考资料&/a&。&/p&&h2&总结&/h2&&p&本文主要介绍了响应式设计相关理论基础，包括：屏幕尺寸，物理，CSS像素等相关概念，视口，响应式设计基础，常见设计模式，及响应式UI实现基本思路等，目前最常见的多屏适配rem方式，博主计划后续继续介绍。&/p&&h2&参考&/h2&&ol&&li&&a href=&https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/Apps/Progressive/Responsive/responsive_design_building_blocks& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Responsive Design&/a&&/li&&li&&a href=&https://link.zhihu.com/?target=https%3A//developers.google.com/web/fundamentals/design-and-ux/responsive/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Respinsive Web Design&/a&&/li&&li&&a href=&https://link.zhihu.com/?target=https%3A//www.quirksmode.org/mobile/viewports.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&A tale of two viewports&/a&&/li&&li&&a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Display_size& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Display Size&/a&&/li&&li&&a href=&https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Viewport Meta tag&/a&&/li&&/ol&
是否还在为你的应用程序适配PC端，移动端，平板而苦苦思索呢，是否在寻找如何一套代码适配多终端方式呢，是否希望快速上手实现你的跨终端应用程序呢，是的话，那就看过来吧，本文阐述响应式UI设计相关理论基础，包括：屏幕尺寸，物理，设备独立，CSS像素，d…
&figure&&img src=&https://pic3.zhimg.com/v2-cebe94e16e30f5e15d50_b.jpg& data-rawwidth=&553& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&https://pic3.zhimg.com/v2-cebe94e16e30f5e15d50_r.jpg&&&/figure&&p&&b&前言&/b&&/p&&p&近日，某某龙在2018年的一次会议上发表了一个演讲，4000多人聚集在现场玩“跳一跳”游戏。随着他们指尖的翻飞跳跃，大屏幕上的现场排名也在不断刷新……而在全场的惊叹声中，最高分出现了，967分！而这位最高分得主，就是某某龙本人。&/p&&p&在随后的演讲中，某某龙也表示，这款DAU在一点几个亿的小游戏，网上居然出现了非常多的外挂。笔者以“跳一跳”为关键词在全球最大的同性社交平台github上进行搜索，居然有650个搜索结果。这些外挂，大多数都是以图像识别为基础的游戏辅助程序。利用这些外挂，玩家们可以很轻松的跳到几千分，甚至上万分。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f274dcf576f5cb324e72b64_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&400& data-rawheight=&586& class=&content_image& width=&400&&&/figure&&p&&br&&/p&&p&&b&同样，在日举办的阿里游戏云“棋牌X安全”技术分享沙龙的活动现场，阿里巴巴集团安全部专家陵轩也对游戏从业者深恶痛绝的外挂问题进行了详细的解读，并针对反外挂提出了阿里的最新解决方案。&/b&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-cebe94e16e30f5e15d50_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&553& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&https://pic3.zhimg.com/v2-cebe94e16e30f5e15d50_r.jpg&&&/figure&&p&&br&&/p&&p&阿里游戏云“棋牌X安全”技术分享沙龙活动现场&/p&&p&&br&&/p&&p&陵轩在活动中提到，作为一款社交平台上的小游戏，如果外挂泛滥，一方面，看到朋友使用外挂打出了一个很高的分数，那么朋友之间的信任可能会出现问题；另一方面，外挂行为会破坏整个游戏的规则，并且让规则立即失效。基于这两方面，最终导致的就是正常玩家的流失，游戏面临衰败和死亡。&/p&&p&比如，一个正常玩家，在不断练习之后，每局的分数应该是会缓慢增长的，如果某个时间段突然增加了几千分甚至几万分，这本身就已经很不正常了。&/p&&p&&br&&/p&&p&&b&外挂的种类&/b&&/p&&p&根据外挂的实现原理，以及对游戏正常业务造成的危害程度，我们对外挂大致可以分为如下三大类：&b&辅助型、修改内存型、破解型&/b&。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5c4c5c50eb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&639& data-rawheight=&352& class=&origin_image zh-lightbox-thumb& width=&639& data-original=&https://pic2.zhimg.com/v2-5c4c5c50eb_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&辅助型&/b&&/p&&p&这类外挂对游戏和业务的影响相对比较小，本身不会修改和破解游戏的代码，主要是模拟用户点击，自动化的做一些重复性的操作。比较常见的是图像识别和按键精灵等工具。通过图像识别技术，可以判断人物当前的位置、火车票余量等；然后通过按键精灵模拟用户点击，达到人物在游戏中的走动、自动购买火车票等操作。&/p&&p&最火的案例莫过于现在的直播答题场景了。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-8f5cb6ffd6b2abcf05db00_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&324& data-rawheight=&493& class=&content_image& width=&324&&&/figure&&p&&br&&/p&&p&外挂程序通过OCR识别出题目的文字，然后通过搜索引擎检索答案，最后自动化点击题目的答案，做到全自动化答题，并且准确率还很高。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-3a8c06aa5bf9914336dbf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&656& data-rawheight=&334& class=&origin_image zh-lightbox-thumb& width=&656& data-original=&https://pic1.zhimg.com/v2-3a8c06aa5bf9914336dbf_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&修改内存型&/b&&/p&&p&修改内存型外挂依托于官方游戏APP，属于动态修改游戏业务逻辑，这类外挂往往会向游戏进程中注入第三方恶意模块，然后通过修改代码的逻辑、修改内存中的数值等手段达到修改游戏地理位置、人物奔跑加速、破解收费道具、修改游戏币数量和增加血量等。此类外挂会极大的破坏游戏的平衡性。&/p&&p&如下是“XX酷跑”的游戏外挂，属于典型的内存修改类外挂程序。此外挂程序会往游戏进程中注入第三方模块，然后通过修改游戏的代码逻辑和内存中的数值，可以随意改变游戏的飞行距离、奖励的倍数、奔跑的速度等参数。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-757cc25bbb34e64ba92a9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&649& data-rawheight=&359& class=&origin_image zh-lightbox-thumb& width=&649& data-original=&https://pic1.zhimg.com/v2-757cc25bbb34e64ba92a9_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&破解型&/b&&/p&&p&破解型游戏外挂对于游戏厂商来说影响是最大的，不仅会破坏游戏的平衡性，更会加速游戏业务走向衰亡。&/p&&p&&b&破解型外挂又分为两类：二次打包和脱机外挂。&/b&&/p&&p&&br&&/p&&p&APP的二次打包是基于对官方APP的修改，属于静态修改代码逻辑。黑客们通过逆向分析游戏逻辑，修改游戏赖以生存的核心功能，比如去除游戏中的广告代码，破解单机游戏的收费逻辑，插入盗号代码等。&/p&&p&如下是《XX那三国》游戏的二次打包版本，其中被插入了“一键跳过”副本、游戏对话速度可调至3倍速等外挂功能。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a2437d56_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&400& data-rawheight=&711& class=&content_image& width=&400&&&/figure&&p&&br&&/p&&p&脱机外挂的出现对游戏厂商来说是毁灭性的打击，这意味着游戏客户端和服务器端通信的逻辑都已经被黑客逆向的非常清楚了，所有的游戏操作都可以脱离游戏客户端而通过脚本来实现。&/p&&p&脱机外挂的危害也显而易见的，首先，原本属于游戏客户端的广告、道具等收入没有了；其次，脚本操作比正常的客户端操作要快很多很多，极大的破坏了游戏的平衡性。当年PC时代最为火爆的《传奇》游戏，很大程度上也是没落于脱机外挂的出现。&/p&&p&如下是《狼人杀》游戏的批量注册小号工具，黑客通过逆向游戏注册逻辑和算法，编写PC端自动化注册工具，完全脱离游戏客户端APP，属于典型的脱机外挂。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1adbe2e34b128c93a6c96b5669375fbc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1303& data-rawheight=&520& class=&origin_image zh-lightbox-thumb& width=&1303& data-original=&https://pic4.zhimg.com/v2-1adbe2e34b128c93a6c96b5669375fbc_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&外挂难防&/b&&/p&&p&作为一名游戏行业反外挂领域多年的从业者，陵轩也在现场对外挂的存在原因，防控难度及外挂的分类等进行了详细的分析。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a4e5b4d429d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&553& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&https://pic4.zhimg.com/v2-a4e5b4d429d_r.jpg&&&/figure&&p&阿里巴巴集团安全部专家 陵轩&/p&&p&&br&&/p&&p&&b&游戏外挂问题，不仅仅只在微信“跳一跳”小游戏中出现，它更是一个手游行业普世存在的、并且不能被忽视的严重问题。那么，这些外挂究竟是如何产生的呢？&/b&&/p&&p&&b&首先&/b&，相较PC时代的C++游戏客户端，现在的手机游戏基本上都是以脚本语言为主。由于脚本语言的特性，游戏的开发成本降低了，迭代周期缩短了，但也同样面临容易被反编译、篡改破解等问题。&/p&&p&&b&第二&/b&，以往在PC时代被广泛使用的游戏驱动保护，到了移动时代由于手机的限制，也同样不能用了。这就导致了黑客可以有Root、越狱等超级权限，而游戏则只有普通的用户权限，这种攻防对抗层面的权限不对等，也是移动端外挂难防的一个很重要原因。这就好比我是一个拿菜刀的屠夫面对一群拿AK47的恐怖分子一个道理，根本没法打。&/p&&p&&b&第三&/b&，出于对手机网络的不稳定，以及流量使用等原因的考虑，很多手机游戏的计算逻辑和过程都在客户端进行，这就导致了黑客可以很容易的篡改客户端进行游戏作弊，比如，直接跳过某些游戏关卡、BOSS一击毙命等。&/p&&p&&b&第四&/b&，手游时代对外挂工作室来说，作弊成本低。一台主流PC机可以虚拟出几十个模拟器；作弊工具产业链成熟，包括IP代理商，卡商猫池、打码平台、群控软件等。&/p&&p&&b&第五&/b&，游戏开发同学通常缺乏安全对抗经验，无法及时发现和阻断外挂的使用和传播。&/p&&p&&br&&/p&&p&&b&谁在使用外挂？&/b&&/p&&p&&b&随着移动互联网的兴起，同时，手游行业制作外挂的成本低，导致更多的外挂制作者从PC纷纷向移动端转变，这就导致了手游外挂的泛滥。那么，究竟是哪些人会使用外挂呢？&/b&&/p&&p&&b&第一类：&/b&虚荣心作祟的玩家。在游戏中，玩家们可以沙场驰骋、江湖侠情，在现实中失意的人们可以再游戏中得到慰藉，使得心灵愉悦。那么，如何才能花更少的钱，得到更大的心灵慰藉呢？唯有借助外挂的力量，可以在战场上杀更多的人，比分比别人高。&/p&&p&&b&第二类：&/b&打金工作室。对于打金工作室来说，游戏币的产量是直接关系到变现的。使用外挂可以自动化的执行游戏中的一些重复性劳动，比如固定的主线任务、跑商、押镖等。而且，在外挂的帮助下，可以24小时全程无人值守，大大提供游戏币的产出量。&/p&&p&&b&第三类：&/b&竞争对手。通过对官方游戏逆向分析，竞争公司可以很容易的通过换肤等手段，制造一款玩法相近、界面类似的新游戏；另外，竞争对手还会使用外挂批量注册小号，来破坏游戏的正常运营。&/p&&p&&br&&/p&&p&&b&通用的检测和防御机制&/b&&/p&&p&&b&游戏外挂的实现方式多样，危害也都各不相同，那么游戏厂商又该如何对不同种类的外挂做针对性的防护呢？&/b&&/p&&p&&b&第一步：客户端APP的防护。&/b&客户端在外发之后，最终到了正常玩家手里还是黑产手里，这块是不可控的，那么如何提高黑客分析客户端代码的成本，保护端上代码的安全是头等大事。我们可以对游戏脚本进行加密处理，对于解密游戏脚本的核心代码逻辑进行代码混淆、加固，反外挂从提升攻防门槛开始，一个保护机制相对完善的客户端，虽然不能杜绝外挂，但能在一定程度上将大部分跃跃欲试的黑客阻挡在外。&/p&&p&&b&第二步：通信链路的防护。&/b&脱机外挂的产生，很大程度上是因为客户端APP和服务器端通信的签名算法、加密算法被破解了。采用常规加解密算法的变形算法，以及保护好核心秘钥至关重要，采用白盒加密不失为一种好的对策。&/p&&p&&b&第三步：业务层及时防控。&/b&云端业务层通过实时的各种IP库、手机库的查询、人机模型算法以及离线的数据分析等。从服务器端及时发现和防控已知和未知的作弊方案，为业务及时止损。被黑客攻击并不可怕，可怕的是不知道被攻击，允许黑客一小段时间的作恶，换取绝大多数用户的安全，是业界通用的做法，快速发现问题并解决问题才是治理外挂的核心。&/p&&p&&br&&/p&&p&&b&物美价廉的解决方案&/b&&/p&&p&基于前面的介绍，手机游戏外挂的制作难度和成本极低，外挂的制作者又都是专业的黑产从业人员；另一方面，对于游戏厂商来说，普通游戏开发者一般都更关注游戏功能逻辑的实现和开发，本身缺乏安全技术和游戏攻防对抗经验。因此，游戏厂商想要及时的发现并阻断外挂作恶相对来说比较困难，从投入产出比来看，成本也相对偏高。&/p&&p&定制的解决方案研发和维护成本过高，但通用的又担心效果不好。是不是能有一个折中的方案呢？答案是肯定的。其实，攻防对抗是一个两军对垒人和人、人和机器博弈的过程，一下子把门槛提升太多是不合时宜的，就像一下子改一个大版本着急大不一样，这个是得不偿失的。利用前面提到的分层而治，就能取得一个比较好的事半功倍的效果。&/p&&p&&b&阿里云游戏安全解决方案，从云（云端业务层）、管（通信链路层）、端（游戏客户端APP）全链路防检测并防控游戏外挂。经过多年双11的攻防演练，阿里巴巴业务风控体系具备及时发现黑产的“眼睛”，为游戏厂商及时止损。&/b&&/p&&p&阿里游戏云“棋牌X安全”技术分享沙龙还在继续，更多会议内容及资讯内容敬请关注阿里聚安全公众号或官方博客。&/p&&p&&br&&/p&&p&&a href=&https://link.zhihu.com/?target=http%3A//weixin.qq.com/r/6kUbAxXEFkhprVFg9xD4& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&weixin.qq.com/r/6kUbAxX&/span&&span class=&invisible&&EFkhprVFg9xD4&/span&&span class=&ellipsis&&&/span&&/a& (二维码自动识别)&/p&&p&&/p&
前言近日，某某龙在2018年的一次会议上发表了一个演讲，4000多人聚集在现场玩“跳一跳”游戏。随着他们指尖的翻飞跳跃，大屏幕上的现场排名也在不断刷新……而在全场的惊叹声中，最高分出现了，967分！而这位最高分得主，就是某某龙本人。在随后的演讲中，…
&figure&&img src=&https://pic4.zhimg.com/v2-b8cdbf1606fbb4a66d75bd4_b.jpg& data-rawwidth=&595& data-rawheight=&335& class=&origin_image zh-lightbox-thumb& width=&595& data-original=&https://pic4.zhimg.com/v2-b8cdbf1606fbb4a66d75bd4_r.jpg&&&/figure&&blockquote&本文整理自RTC大会，陈功的演讲《网页端实时音视频服务架构与实践》。&/blockquote&&h2&1、分享者&/h2&&p&（本文同步发布于：&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&52im.net/thread-1282-1-&/span&&span class=&invisible&&1.html&/span&&span class=&ellipsis&&&/span&&/a&）&/p&&p&&b&陈功：&/b&负责网页端音视频通信技术架构。毕业于中国科学技术大学，Ph.D。原英特尔服务器事业部多媒体架构师，主导基于WebRTC的视频会议解决方案搭建。曾任职Marvell视频事业部，研究多媒体系统框架，参与Google TV, OTT等项目。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-630a497a845_b.jpg& data-size=&normal& data-rawwidth=&1280& data-rawheight=&853& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic1.zhimg.com/v2-630a497a845_r.jpg&&&figcaption&▲ 本文分享者：陈功&/figcaption&&/figure&&h2&2、网页端的实时音视频的特点&/h2&&p&&b&网页端的实时音视频有什么特点：&/b&&/p&&ul&&li&&b&首先-在浏览器端：&/b&&br&依赖于浏览器获取音视频的能力，以及强大的网页上的渲染能力，所以，就能够为高清的通信体验打下基础。同时，相比移动端来说，屏幕比较大，视窗选择也比较灵活；&/li&&li&&b&第二-跨平台：&/b&&br&大家都了解浏览器对各个终端的特殊性，不止PC上有浏览器、移动端上有浏览器，甚至是一些知名的社交APP也嵌入了浏览器。这需要一个跨平台的体验，现在支持WebRTC的浏览器也越来越多了，这也是网页实时通信的一个特点；&/li&&li&&b&第三-免安装，方便接入：&/b&&br&随着WebRTC的普及，它不需要安装任何插件就可以实现网页端的实时通信。&br&&/li&&/ul&&h2&3、网页端实时通信可以应用在什么场景&/h2&&p&首先是直播，直播非常火。直播的主播端会有需求，在网页端进行开播，因为网页端的屏幕比较大、视频比较清晰、处理能力比较强。同时，也非常有意思，我们一个客户也在用我们网页端的SDK做直播的监控。大家也知道，直播开播的房间数很多，在一个网页上可以监控40-50个房间，来做直播的巡视员，用网页端的实时音视频SDK是比较方便的。&/p&&p&另外一个是在线教育，在线教育的老师端一般都在PC上，如果要安装应用程序，有些老师也不是很懂电脑技术，要去配置的话就比较麻烦。如果有网页端免安装的方案的话，他们用起来的话，用户体验也会比较好。在线教育除了音视频，还要求有屏幕共享、白板，因为都是H5的技术，所以与Web端的SDK集成起来的话也会非常方便。&/p&&p&最后就是视频会议，大家在公司里用过浏览器的视频会议的话都会有体验，HR发一个链接，某一个时间点你点这个链接，除此之外还有一些说明，你要安装哪些东西，这个会比较复杂。现在有了免安装的WebRTC之后，大家对视频会议的体验也会上升一个台阶。这边列的这几个是比较典型的场景，其实还有远程医疗、企业协作之类的。&/p&&h2&4、从技术上看，网页端的实时通信是否已经成熟？是否已经准备好了？&/h2&&figure&&img src=&https://pic2.zhimg.com/v2-4d1bea85011c8_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&610& data-rawheight=&210& class=&origin_image zh-lightbox-thumb& width=&610& data-original=&https://pic2.zhimg.com/v2-4d1bea85011c8_r.jpg&&&/figure&&p&如果说到网页端、浏览器端的实时通信的话，大家首先会想到的就是Webex，它的体验是非常不错的，也培养了一大群目标用户，让用户认知到在浏览器上就可以进行视频的沟通，打开了一个市场。但是，它有一个缺点，就是必须安装浏览器的插件和扩展程序，和GoToMeeting是一样的，非常不方便。另一种做法是，在PC上安装一个应用程序，通过这个程序来代理获取、处理音视频的流，网页端只是做渲染和展示。
&/p&&p&在很长一段时间里，这些网页端的用户觉得这个技术就是这样的，体验就是这样的，无法提升了。直到2011年，WebRTC技术的出现，并且由谷歌做推广。WebRTC带来的体验是因为免安装才受到了关注。现在在差不多6年的发展时间里，其实也有很多的质疑声，比如，Google的项目会不会半途而废，各大浏览器厂商会不会不支持这种打通浏览器生态的想法。&/p&&h2&5、WebRTC是否已经成熟，是否可以产品化？&/h2&&p&&b&5.1 WebRTC浏览器支持情况&/b&&/p&&p&首先，来看一下目前知识WebRTC浏览器和平台的情况。&/p&&p&最早支持WebRTC的是Firefox和Chrome，之后是Opera，跟随者chrome支持WebRTC，它们内核是一样的。微软前两年提出了一个ORTC的协议，跟WebRTC有些相似。ORTC发展并不顺利，现在在edge中开始支持WebRTC。近期苹果更新了IOS系统之后，Safari 11也开始支持WebRTC了。在安卓平台上，其实很早就开始支持了WebRTC。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-7e46cd79bd8_b.jpg& data-size=&normal& data-rawwidth=&570& data-rawheight=&259& class=&origin_image zh-lightbox-thumb& width=&570& data-original=&https://pic1.zhimg.com/v2-7e46cd79bd8_r.jpg&&&figcaption&▲ WebRTC的浏览器支持情况&/figcaption&&/figure&&p&如上图所示，我们看一下这几个浏览器在市场上的占有情况，不难看出，现在除了占百分之8点几的IE之外不支持，其他的其实都已经支持了。&/p&&p&我们再从协议栈的角度来看一下。WebRTC 1.0 Spec已经基本定稿了，除了一些比较细节的问题还没有最终确认。各个浏览器对标准的支持也越来越好。虽然谷歌自己也在推广这个技术，但是谷歌自己的浏览器Chrome对WebRTC 1.0的支持并不是很好，这是因为谷歌在内部对WebRTC做了很多实验性的东西。Chrome团队对外声称，会在今年底，完全跟上WebRTC 1.0的标准。&/p&&p&&b&5.2 WebRTC的开源社区现状&/b&&/p&&p&&b&另外一个方面，看一下开源社区，举几个比较典型的开源项目：&/b&&/p&&ul&&li&Kurento：它是功能比较强大的一个多媒体处理框架，支持WebRTC协议栈。它可以作为Media server，后台有转码的能力，并且有OpenCV处理能力；&/li&&li&Licode：可以作为WebRTC的轻量通信平台，是纯转发的服务器处理模式；&/li&&li&Janus：可以作为WebRTC通信网关，比较轻量；&/li&&li&React-Native-WebRTC：值得关注的是React-Native-WebRTC，现在越来越多的开发者开始转向前端，JS。这种情况在国外更为普遍。在开源社区上出现了这么一个项目，封装了一个WebRTC的模块，开发者就可以很方便的在手机上来实现带有实时通信能力、兼容WebRTC的应用。&br&&/li&&/ul&&p&&b&5.3 WebRTC生态圈&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-86fdd01c96_b.jpg& data-size=&normal& data-rawwidth=&508& data-rawheight=&788& class=&origin_image zh-lightbox-thumb& width=&508& data-original=&https://pic4.zhimg.com/v2-86fdd01c96_r.jpg&&&figcaption&▲ WebRTC的生态圈&/figcaption&&/figure&&p&市场分析对WebRTC非常看好，预计到2022年市场规模将达到64.9亿美金。总的来说，WebRTC技术现在处在一个最好的时代。&/p&&h2&6、如何能够构建起一个WebRTC的系统？&/h2&&p&对于开发者来说，如何用这个技术、如何能够构建起一个WebRTC的系统？其实是有一段必经之路。&/p&&p&我们知道WebRTC的底层是基于P2P连接，是点对点的通信。很多开发者上手的时候，都会去做P2P质量的检验。比如说一个公司的产品经理告诉开发人员说“现在WebRTC很火，你给我整一个WebRTC的系统。”八成的开发人员会交付这样一个网状结构WebRTC的架构。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-59defd0d2ebb_b.jpg& data-size=&normal& data-rawwidth=&639& data-rawheight=&232& class=&origin_image zh-lightbox-thumb& width=&639& data-original=&https://pic2.zhimg.com/v2-59defd0d2ebb_r.jpg&&&figcaption&▲ WebRTC的P2P模型&/figcaption&&/figure&&p&那么，完全基于点对点之间通信的架构有什么特点？延时会比较小。但是，有一个很大的缺点。这种点对点音视频流的传递，每一个用户都要给另外一个用户传自己的视频流，这样对它上行带宽的压力很大。并且，每一路视频流都是独立进行采集编码，这对浏览器端编码压力的考验也很大。有人会问，能不能只采集一次编码，然后就把这个流发给不同的终端接收者？很遗憾，这是不行的。因为WebRTC的协议是做端到端的质量策略优化，所以它有一些策略调整，都是端对端的RTCP来实现，必须要经过多次的编码，然后分别传输给不同的接收者。&/p&&p&右下角的表格列的是一个权威的行业机构统计的目前在互联网上使用WebRTC的系统架构，纯P2P的只占19%。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ad3d2b2dc599a20aff21987c_b.jpg& data-size=&normal& data-rawwidth=&659& data-rawheight=&274& class=&origin_image zh-lightbox-thumb& width=&659& data-original=&https://pic3.zhimg.com/v2-ad3d2b2dc599a20aff21987c_r.jpg&&&figcaption&▲ WebRTC的通信架构占比&/figcaption&&/figure&&p&如果按刚才介绍的这个架构，开发人员交付给产品的话，肯定会打回来的，因为大家都知道，上行带宽非常宝贵，也非常受限。为了解决这个问题，开发人员会做一些深度的研究，发现领域内的WebRTC架构其实中间加了一个点，这个点就是服务器，典型的媒体服务器只做多路流的转发，不做后台的媒体处理和转码。&/p&&p&上节提到的Janus和Licode开源项目都可以实现转发媒体服务器的功能。它的特点是，每个终端用户只要上传一路流到中间服务器，节省了带宽。同时SFU只是做转发，所以对延时的影响相对比较小。弊端是，如果有两路接收者，下行带宽的能力不一样，一个是500K，一个是2m，由于源端发送者只送一路流，所以就很难适配多路的终端。&/p&&p&改成纯转发的媒体服务器之后，它还有一些弊端，开发人员又会想办法说，我在中间这个节点加上混流的功能。大家也可以从这个架构当中看出来，在服务器端收到不同的两路视频流之后，会分别做解码、拼接合成、编码。根据不同接收者的带宽情况，分别给不同的接收者发送不同profile的视频流。这就解决了，如果是多个接收端的用户，无法做到带宽的适配。这个缺点也很明显，中间做转码必然带来延时，其次是转码服务器的成本很高，但是，确实}
我要回帖
更多关于 手机缩放图片的软件 的文章
更多推荐
- ·求刘若英版的《漂洋过海来看你26集版》
- ·八字命理能看出患上相思病的10大特征吗？
- ·小龙票邮票价格下午3时买当天的票，他最多能看几部影片？是哪几部影片？答案是啥
- ·2023-2024年欧洲杯赛季西甲冠军是哪个队？
- ·师傅们，这紫薇紫微斗数看流年桃花盘，什么大运流年结婚？
- ·开始吃饭了，夏天喝多少酒合适
- ·权利的游戏1-6百度云 要衣柜字幕~
- ·谁有军师联盟40集和41集求分享谢谢
- ·进化之地2时空之石位置怎样运用飞翼穿梭时空
- ·为什么总有无良媒体说什么王宝强配马蓉现在有点高攀
- ·为什么R-2R DAC就是拼音R开头的好听的字？为什么顶级Hi-End厂家都是R2R
- ·谁知道王牌战争双层货架货架网址？
- ·我的小八这天不喜欢吃面包虫成虫吃什么了，怎么回事
- ·龙珠超宇宙2移动到对手死角1.07解压到哪里
- ·dnf2017夏日礼包中哪个宠物好
- ·咖啡喝多了会死人吗咖啡喝多了会死人吗那1天和两杯咧。
- ·老娃蒜种在家里好吗
- ·解落三秋叶能开二月花过江千尺浪，能开二月花。过江千尺浪，入竹万竿斜，谜
- ·主卧室风水摆放有何讲究
- ·hamilton evans编舞stay是什么舞蹈
- ·缩放工具哪些棋牌平 台比较正规像素缩放不是由字节表示，
- ·王者荣耀无限乱斗模式哪几个英雄厉害的最新相关信息
- ·badinerie巴赫最初写给什么乐器的
- ·除以33.4打一成语语
- ·临沂朱世栋一一中国该和印度打一仗了！好处是一一锻炼了队伍，检验了武器，振奋了人心，震胁了美日越菲，
- ·世界航母俱乐部里面有几个真玩家
- ·基督教歌曲我要把上帝的爱送给你什么都不能我与上帝的爱隔绝
- ·new game，是百合番吗
- ·剑网3调查伙房哪个有毒
- ·求一部日本电影，几个性格各异的老奶奶参加一个旅游团后来跟丢了在山里探险过夜的故事。
- ·王者荣耀怎么看印记集多少，还差哪几个
- ·哪里可以买到正宗大吉岭麝香葡萄茶
- ·用开壶放豆腐是错误的开紫砂壶科学吗
- ·上次在网站看到过福建一些学福建表演艺考考都不错，求推荐
- ·橙光游戏没有图片
- ·17-04-01MHXX G3狞猛镰蟹怎么开
