轻松学习,你该知情的字体

时间:2019-10-06 23:57来源:美高梅游戏网站
风趣的CSS标题(12):你该知情的字体 font-family 2017/01/06 · CSS · 1评论 ·字体 正文小编: 伯乐在线 -chokcoco。未经小编许可,禁绝转发! 应接到场伯乐在线 专栏撰稿人。 微小的书体其实

风趣的CSS标题(12):你该知情的字体 font-family

2017/01/06 · CSS · 1 评论 · 字体

正文小编: 伯乐在线 - chokcoco 。未经小编许可,禁绝转发!
应接到场伯乐在线 专栏撰稿人。

微小的书体其实有大大的学问,大概与字体相关的洋洋学问都偏设计,可是俗话说技多不压身,艺多不压身,多理解驾驭放区救济总会归没有错。

美高梅游戏网站 1

一篇真正教会你付出活动端页面包车型大巴稿子(二)

2017/12/07 · 基础本事 · 移动端

初稿出处: HcySunYang   

用jQuery Mobile做HTML5活动使用的多少个优短处

2013/03/30 · HTML5 · 来源: 伯乐在线     · HTML5

马耳他语原稿:Niall O’Higgins,编写翻译:伯乐在线——唐尤华

在过去大约二个月的时间里,作者直接在动用JQuery Mobile为一个强健身体培养锻炼网址开拓基于HTML5的无绳电话机/平板前端选取。笔者事先曾经写过Android和iOS应用程序(分别用Java和Objective-C),由此要是编写一段基础代码就足以在主流平台上运维并能够飞快地用HTML和JavaScript迭代,那样的许诺十二分使人迷恋。

JQuery Mobile & HTML5

运用HTML5和JavaSript创设一个部手提式有线电话机应用,你供给写非常多JavaScript代码。但是,带有触摸屏的配备的UI调节和拍卖与标准的Web应用程序特别例外。因此,你会想要使用现有的手提式有线电话机HTML5/JavaScrip框架(除非您有众多的岁月还要打算将兼具东西重新营造)。未来有数不清现存的框架可供选用:jQTouch、 Sencha Touch 等等。

小编成为JQuery的观众已经相当多年了,极其欣赏它的至简历史学以及特出的中坚特性和插件以及社区的进献。正是由于有JQuery,笔者才可以经受使用JavaScript开辟。所以,当听到 克莉丝 McDonough(Pyramid Python Web 框架的撰稿人)发表JQuery的好信息时,笔者明白小编应该去试一试。

 

JQuery Mobile 和 HTML5 的 3个优点

1. 上手火速并帮忙高效迭代:在贰个星期多或多或少的时间里,通过翻阅JQuery Mobile文书档案以及O’Reilly出版的JQuery Mobile书籍,作者造成了叁个方可干活的app初步版本。从前作者尚未HTML5 / JQuery Mobile开采经历。与Android和iOS比较,使用JQuery Mobile和HTML5创设你的UI和逻辑会比在原生系统下塑造快得多。

译注:原生系统:原装的操作系统,举个例子Android原生系统是谷歌宣布未经修改的系列。在本文中,原生应用指直接用系统提供的API开采的主次,与JQuery Mobile开荒的主次相呼应。

本人发觉Apple的Builder接口的学习曲线特别陡峭,同样学习令人费解的Android布局体系也很耗费时间间。其余,要选择原生代码将三个list view连接到远程的数据源并具备能够的外观是十一分复杂的(在Android上是ListView, 在iOS上是UITableView)小编能力所能达到由此已经调节的JavaScript和HTML/CSS知识火速地贯彻均等的功用,没有要求学习新的adapter,delegate等等抽象概念,只要编写JQuery代码就能够做到。

2.幸免麻烦的利用百货店审查批准进度以及调解、创设带来的惨恻:为手提式有线电电话机支付使用,非常是iOS系统的无绳话机,最惨烈的历程实际上通过Apple应用市廛的审查批准。想要让多个原生应用程序公布给iOS顾客,你须求等待三个很短的进度(供给一些天,以至大概是少数周)。不只有在率先次公布程序时要经历苦难,现在的每一遍进级也是那般。那使得QA和发布流程变得复杂,还有恐怕会扩张额外的年月。由于JQuery Mobile应用程序仅仅是一种web应用程序,由此它三翻五次了具有web景况的亮点:当客户加载你的网址时,他们就当下“晋级”到最新的本子。能够即时修复bug和拉长新的特色。固然是在Android系统——应用市镇的渴求比起Apple碰到要宽松得多,在客户悄无声息中成就产品进级也是一件很好的职业。

进一步的益处是,发表beta或测量检验版本会进一步便于。只要告诉客商用浏览器张开你的网站就能够了!没有需求思量iOS令人抓狂的DRM,也不要求理会Android必得的APK。

3.支撑跨平台和跨设备花费:贰个伟大的功利是,小编的应用程序立时能够在Android和IOS上行事,一样也得以在其他平台上干活。作为贰个单身开垦者,为区别的平台维护基础代码是一项宏大的劳作。为单个手机平台编写高水平的无绳电话机选取要求全职专门的学问,为种种平台重复做类似的政工须要大批量的能源。应用程序能够在Android和IOS设备上同时职业对自家来讲是二个壮烈收获。

更上一层楼,特别是对于运维Android各个分支的设施,它们大小和形态不一,想要让你的应用程序在五花八门显示器分辨率的无绳电话机上看起来都没有错,那是真正的挑衅。对于供给从严的Android开拓者来讲,遵照显示器大小举行设显示屏分割(从一丝一毫最小化到最大进展缩放)会供给过多支出时间。由于浏览器会在各种设备上以同样的不二等秘书诀展现,关于那个下边你不用有别的忧虑。

 美高梅游戏网站 2

 

JQuery Mobile 和 HTML5 的3个缺点

1.比原生程序运维慢:以笔者之见最大的劣点是,即使是在新式的Android和iOS硬件上(双核Tegra 2 Android手提式无线电话机,双核surface2平板),JQuery Mobile应用程序都会显著慢

于原生程序。特别是在Android上,浏览器比起iOS更加慢且bug越来越多(尽管Google是注意web领域的集团)。小编未曾在更早的Android设备上测验本人的次序,只怕向来就不可能运作(比如Android G1)。笔者深信在现在的12-2七个月,硬件速度会火速得到进步(举例,四核设备二零一二年及时快要上市),品质恐怕不慢就不会化为难点。可是今日,它真的是四个劣势。假令你只留意于iOS,你大能够期望一下浏览器的习性,起码它在那上头是百无一失的(不像Android,中兴等等)

2.奇怪(跨浏览器、跨平台支付):JQuery Mobile将来仍是beta版本,因而作者遇见了相当多bug。约等于说,JQuery团队还在主动地余烬复起GitHub上提议的主题材料。小编以为当中最大的三个标题是各样浏览器在不相同的无绳电话机平台上奇特的表现。那么些主题材料直接为人批评。应用程序大概看起来有个别诡异——即便小编认为JQuery Mobile团队在widget和大旨上做得很棒,但真正和原生程序看起来有醒目标两样。那些难题到底对客户有多大影响不知所以,不过这点须要引起注意。

3. 有限的技术 vs 原生程序:很明显,运营在浏览器上的JavaScript不能够完全地探望设备的不在少数表征。二个规范的例证正是录制头。然则,类似PhoneGap这样的工具能够帮助减轻广大广阔难题。实际上,作者早就初始将本身的应用程序通过PhoneGap将几个本子安顿到iOS和Android上,使用的是原生照片墙(Instagram)绑定,效果令笔者影像浓密。作者会在今后的博客中写一些行使PhoneGap的经历。

 

总结

同理可得,笔者认为利用JQuery Mobile和HTML5作为手提式有线电话机使用开辟平台是立见成效的。但是,那并不适用于(最少到近日截止)所有品类的应用程序。对于简易的从头到尾的经过体现和多少输入类型的应用程序(相对的是急需加上多媒体/游戏程序),它是对原生程序一个无敌的增加。小编对协和的应用程序使用新平台的结果以为快乐——不再须要同不经常间为Android和iOS维护自己的健美跟踪软件。

在接下去的1-2年中,随着硬件变得越来越快,手提式有线电话机配备进而八种化,作者深信不疑HTML5 (JQuery Mobile, PhoneGap, 等等)在四哥大应用开拓中会成为尤其首要的能力。

 

意大利语原版的书文:Niall O’Higgins,编译:伯乐在线——唐尤华

【如需转发,请在正文中注解并保留原来的小说链接、译文链接和翻译等音信,感激合作!】

 

赞 收藏 评论

轻便学习 JavaScript (3):函数中的暗许参数

2017/11/11 · JavaScript · 函数, 参数

原来的小说出处: Dhananjay Kumar   译文出处:码农网 – 小峰   

JavaScript函数能够有私下认可参数值。通过私下认可函数参数,你能够开始化带有暗许值的正经参数。假诺不早先化具备有些值的参数,则该参数的暗许值为undefined。

请看下列代码:

function foo(num1){ console.log(num1); } foo();

1
2
3
4
function foo(num1){
    console.log(num1);
}
foo();

在调用函数foo时,你未有传递任何参数,由此变量num1的暗中同意值设置为undefined。不过,有时你也许供给安装暗许值而非undefined。过去,最棒的计划是测量检验参数值undefined,然后分配三个值。所以,在地方的例证中,如若您想要将num1的暗许值设置为9,那么你能够依据以下代码所示的措施做:

function foo(num1) { if (num1 === undefined) { num1 = 9; } console.log(num1); } foo();

1
2
3
4
5
6
7
function foo(num1) {
    if (num1 === undefined) {
        num1 = 9;
    }
    console.log(num1);
}
foo();

ECMAScript 6引入了函数的暗许参数。使用ECMA 二〇一六的私下认可参数功效,你将不再必要检讨未定义的参数值。今后,你能够将9安装为参数自己的默许值。你能够重写上述函数以利用暗许值,如下所示:

function foo(num1 =9) { console.log(num1); } foo();

1
2
3
4
function foo(num1 =9) {
    console.log(num1);
}
foo();

对此函数foo,假如num1参数的值未被传送,那么JavaScript将安装9看作num1的私下认可值。

危险的 target=”_blank” 与 “opener”

2018/09/05 · JavaScript · target

初稿出处: 创宇前端   

美高梅游戏网站 3

在网页中央银行使链接时,假设想要让浏览器自动在新的标签页张开钦定的地址,平日的做法就是在 a 标签上增添 target等于"_blank" 属性。

可是,正是这些天性,为钓鱼攻击者带来了可乘之隙。

字体的归类

就 Web 常用的有个别字体来说,平日听别人说的书体类型,大约能够分为这两种:

  • serif(衬线)
  • sans-serif(无衬线)
  • monospace(等宽)
  • fantasy(梦幻)
  • cuisive(草体)

骨子里大要上分为衬线字体和无衬线字体,等宽字体中也许有衬线等宽和无衬线等宽字体,这5 个分类是 font-family 的 5 个可用字种类列取值。

美高梅游戏网站 4

也正是说,上述 5 个名字,代表的并不是某些特定字体,而是一多级字体,那么些通用的称号允许顾客代理(平时正是浏览器)从相应集结中接纳一款字体。

那也很好解释了,font-family 中的 family ,家庭的意思,也正是不单单指七个,而是能够钦定多少个,上述 5 个匈牙利(Hungary)语单词都是 font-family 的可用取值,下文还有恐怕会详细讲到。

上面详细摸底一下每类字体。(本来每三个字体都有贴暗意图的,无助天涯论坛摆出来太影响美观,能够运动我的Github阅读)

移动端支出的干货篇

在此之前写了一篇小说《一篇真正教会你付出活动端一面包车型大巴稿子(一)》/)。那是本篇作品的根基,若无读书过的同班能够去拜候,前些天就给大家带来干货,真着实正的讲到如何很好的开荒二个运动端的页面

美高梅游戏网站 5

好了,让大家初阶吧,从哪儿起始吧?从设计图早先,即PSD稿件:
活动端PSD稿件的尺码肯定相比PC端的PSD稿件分化,具体呈未来设计图的尺寸上,未来运动端的设计图尺寸多数以一加5和BlackBerry6的配备像素尺寸作为基于,比方得到一张PSD设计图,它的总宽度为640px(三星5)只怕750px(HUAWEI6)。本例就拿One plus6的布署图尺寸为标准进行疏解,其余设计图尺寸道理是同样的,那并不影响大家的花费。

首先大家要有一张设计图才行,看下图,如若大家有一张设计图,它很简短,唯有贰个暗绿的方框:

美高梅游戏网站 6

获得了统一策画图,于是你开快乐心的最早写代码了,你张开了编辑器,并写下了之类HTML代码:

JavaScript

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body> <div class="box"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
 
    <div class="box"></div>
 
</body>
</html>

HTML代码写好了,你用了多个富含box类的div标签作为ps稿中的藏蓝绿块,经过尺寸度量,你为地点代码加多了CSS样式,最后你的代码是那样的:

JavaScript

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <style> body{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <div class="box"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
</body>
</html>

地点的代码中,你只是在原先的根底上平添了CSS样式,首先你解决了body标签上的暗许样式,那几个没什么好说的,然后你依照规划图中衡量的尺寸来给box编写样式,宽200px;高200px;背景灰黄。看上去并不曾什么难点,于是你开欢悦心的展开浏览器,刷新页面,你的声色沉了下来,因为您见到了你不想见到的结果,如下图,上海体育场地为设计稿的体制,下图为你编写的html文件的体裁:

美高梅游戏网站 7

美高梅游戏网站 8

透过相比较psd原稿和我们脚下所写的html页面,可以看见我们html页面包车型客车题目,均红方块与任何页面包车型大巴百分比和psd原稿不一致样啊,那么为何大家精通是依据原稿衡量的尺寸写出来的代码却和psd原稿突显的职能不相同等呢?别忘了,psd原稿的尺寸是遵从设备像素设计的,由于咱们所用的设计稿是基于Nokia6设计的,所以大家设计稿的尺码正是金立6的器材像素的尺寸,也正是750px,而小编辈CSS中的样式是基于布局视口的尺码计算的,由于大家html页面中由于写入了以下meta标签:

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

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

在上一篇大家讲过, width=device-width 这段代码是让布局视口的尺码等于卓绝视口。
依照公式(缩放比例为1):
设施像素比(DPWrangler) = 设备像素个数 / 理想视口像素个数(device-width)
因为金立6的DP库罗德(设备像素比)为2,设备像素为750,所以中兴6的上佳视口尺寸为375px。所以地点代码最后变成的是:使我们布局视口的上涨的幅度产生了375px。而笔者辈CSS中编辑的体制尺寸又是依照布局视口总计的,所以大家获得的页面看上去比例不对,如下图:

美高梅游戏网站 9
美高梅游戏网站 10

如上边两幅图片,大家掌握,psd稿的总宽是750px,成分宽200px,而作者辈真的做页面包车型地铁时候,布局视口的宽度是375px,正好是设计稿的八分之四。所以大家不能够直接采取设计稿上边衡量所得的像素尺寸,遵照比例,大家相应将度量所得的尺码除以2,才是我们CSS中布局所用的尺寸,据此,大家将200px除以2猎取100px,于是大家修改代码,将黄绿方块的宽高都设为100px,刷新页面,看看比例是或不是和规划图一律了?答案是必然的,如下图为修改后的html页面:

美高梅游戏网站 11

这么,大家就获得了正确的数目,并且准确的写出了页面,你很欢跃,但是难点来了,假若你在做页面包车型大巴时候,度量了一个成分的肥瘦,宽度是三个奇数,举个例子111像素,依照大家事先的做法是,将衡量到的数据除以2,获得大家确实使用的数量,所以111除以2等于55.5px,大家理解,Computer(手提式有线电话机)不能够显示不到三个像素的像素值,Computer(手提式有线电电话机)会自行将其补全为三个像素举办显示,所以最终会将成分展现为56像素,那并非大家想要的结果。
别的,我们的设计稿是基于iphone6设计的,我们调节和测量检验页面也是在iphone6下调试的。又因为iphone6的器具像素比试2,所以大家技术由统一希图稿度量的多少除以2后直接运用,况兼在iphone6下并没十分,可是你要精晓,而不是具备手提式有线话机的配备像素比都以2,有的手提式无线电话机的器材像素比试2.5也许3。何况不相同装备的设施像素又分化,那样就产生理想视口的尺码差异,进而导致布局视口的尺寸不一样,那么我们直接遵照iphone6的宏图稿尺寸除以2拿走的尺寸用来编排CSS是不能在具有设备下一体化展现的。

故而,我们要换一个情势。
于是大家想到:借使大家能将布局视口的尺寸设置为和设备像素尺寸相等的话,那样我们就保障了设计图与页面包车型客车1:1事关,那么大家就能够直接运用psd中度量的尺寸了,然后在其余尺寸的手提式有线电话机中,大家进行等比缩放就ok了。那么怎样手艺让布局视口的尺码等于设备像素尺寸呢?

咱俩注意到meta标签中的 width=device-width 这段代码,首先你要驾驭那句话的情趣,前面讲过,那句话最后促成的结果是:让布局视口的尺码等于卓越视口的尺码。话中有话就是,在代码 width=device-width 中:

width:是布局视口的width
device-width:是一矢双穿视口的增进率

根据公式(缩放比例为1):

设施像素比(DPOdyssey) = 设备像素个数 / 理想视口像素个数(device-width)

以iphone6为例:
设施像素比(DP奇骏):2
配备像素个数:750
故而在缩放比例为1的处境下,iphone6理想视口的像素个数为 750 / 2 = 375,也正是说,对于iphone6来说 device-width的值为375

因此大家经过width=device-width那句话,直接的将布局视口的尺寸设为了375,也等于说,如若大家能退换理想视口的尺寸,也就更动了布局适口的尺码,怎么着转移理想视口的尺寸呢?那将要讲到缩放了,上一篇大家讲到过缩放,缩放是压缩或放大CSS像素的经过,以iphone6为例,当我们缩放比例为1:1的时候,由于iphone6的设施像素比为2,所以iphone6的设施像素与CSS像素的关系看起来就疑似下图那样:

美高梅游戏网站 12

三个CSS像素宽度等于几个装备像素宽度,所以750px的器材宽度的布局视口为357CSS像素。那是在缩放比例为1的状态下,既然缩放能够放大或收缩CSS像素,所以倘若大家将CSS像素的幅度缩放至与设备像素宽度相等了,那么7肆19个器材像素也就能够显得7伍拾个CSS像素,缩放后的设施像素与CSS像素看起来应当像下图那样:

美高梅游戏网站 13

可是,大家的缩放倍数是有个别啊?在缩放比例为1的时候,三个CSS像素的幅度 = 七个设施像素的肥瘦,借使大家想让 三个CSS像素的小幅度 = 一个设备像素的增幅,大家将在将CSS像素降低为本来的0.5倍,实际上,大家缩短的翻番 = 设备像素比的尾数。
于是,大家修改下边包车型客车HTML代码(修改了meta标签):

JavaScript

<html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" /> <style> body{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <div class="box"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
</body>
</html>

瞩目,下面代码中大家给革命方块使用的CSS尺寸直接使用的是psd稿中衡量的尺寸,我们刷新页面,怎样?满足吗:

美高梅游戏网站 14

不过大家那是有个前提的,这正是缩放0.5倍只适用于设备像素比为2的设施(因为缩放值 = 1 / 设施像素比)。所以,为了适应全数的装置,咱们应当用javascript代码动态生成meta标签:

var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

  • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
1
2
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

其中 window.devicePixelRatio 的值为器械像素比。
于是乎大家的代码形成了如此:

JavaScript

<html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="" /> <style> body{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <div class="box"></div> <script> var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

  • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); </script> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
    <script>
    var scale = 1 / window.devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    </script>
</body>
</html>

上面包车型大巴代码最后能确定保障一个标题,那正是随意任何设施,布局视口的上升的幅度总是等于设备像素。
如此,大家在规划图中度量为200px的肥瘦就会一向用在CSS中了,并且在iphone6中显得完好,可是别忘了,大家的宏图图正是基于iphone6设计的,倘诺换做其余设备,还是可以显得完好么?大家不要紧试一下,如下图,是下面代码在iphone5和iphone6下的对待:

美高梅游戏网站 15

美高梅游戏网站 16

大家开掘,无论是五依旧6,尽管设备像素变了,即显示器宽度变了,不过黄色方块的上升的幅度并从未变,那并非四个好的景观,因为这么页面包车型大巴要素就不成比例了,会耳熟能详到布局,所以大家要想艺术让大家页面包车型地铁因素跟着设备转移而等比缩放,那便是大家要消除的第叁个难题,怎么落到实处啊?那将在讲到rem的知识点了。

关于作者:唐尤华

美高梅游戏网站 17

做本身喜好的,编制程序、喝茶、看世界 个人主页 · 小编的作品 · 18 ·     

美高梅游戏网站 18

自己商量未定义的参数

就算你在调用函数时分明地传递undefined作为参数值,参数值也将安装为暗中同意值。

function foo(num1 =9) { console.log(num1); } foo(undefined);

1
2
3
4
function foo(num1 =9) {
    console.log(num1);
}
foo(undefined);

在地点的代码中,你传递undefined为num1的值;因而,num1的值将被安装为默许值9。

起源

serif — 衬线字体

serif,意为有衬线的字体,衬线的意趣是在字符笔画末端有可以称作衬线的小细节的额外装饰,而且笔画的粗细会有所区别,这个细节在大写字母中刻意扎眼。

OK,那么有啥常用字体属于衬线字体呢?

rem

什么是rem?
rem是相对尺寸单位,相对于html标具名体大小的单位,举例:
如果html的font-size = 18px;
那么1rem = 18px,供给牢记的是,rem是基于html标签的字体大小的。

信赖您曾经知晓了,对科学,大家要把在此以前用px做成分尺寸的单位换来rem,所以,未来的标题就是只要转变,因为rem是基于html标签的font-size值明确的,所以大家只要鲜明html标签的font-size值就行了,我们第一自个儿定一个正规,正是让font-size的值等于设备像素的十分一,即:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

1
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

以iphone6为例,html标签的font-size的值就也正是 750 / 10 = 75px 了,这样 1rem = 75px,所以深褐方块200px换算为rem单位正是 200 / 75 = 2.6666667rem。
那正是说在iphone5中呢?因为iphone5的设备像素为640,所以iphone的html标签的font-size的值为 640 / 10 = 64px,所以 1rem = 64px,所以在iphone6中呈现为200px的因素在iphone5中会显示为 2.6666667 * 64 像素,那样,在差别器械中就贯彻了让要素等比缩放进而不影响布局。而地点的措施也是手提式有线电话机Taobao所用的艺术。所以,今后你只要求将您度量的尺寸数据除以75就转换来了rem单位,倘若是Samsung5将在除以64,即除以你动态设置的font-size的值。

另外索要静心的是:做页面包车型客车时候文字字体大小不要用rem换算,依然利用px做单位。前面会讲到。

让大家来总计一下我们后天询问的方式:

1、将布局视口大小设为设备像素尺寸:

var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

  • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
1
2
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2、动态设置html字体大小:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

1
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

3、将规划图中的尺寸换算成rem

要素的rem尺寸 = 成分的psd稿度量的像素尺寸 / 动态设置的html标签的font-size值

说了一大堆,其实我们采用下边包车型地铁html莫板就足以写页面了,独一须要你做的正是测算成分的rem尺寸,所以正是你没看懂上边的呈报也不主要,你借使将莫板拿过去用就好了:

JavaScript

<html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="" /> </head> <body> <script> var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

  • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </script> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="" />
</head>
<body>
 
 
 
    <script>
    var scale = 1 / window.devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
 
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    </script>
</body>
</html>

现今我们应用方面包车型大巴法子修改我们的代码如下:

JavaScript

<html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="" /> <style> body{ margin: 0; padding: 0; } .box{ width: 2.66666667rem; height: 2.66666667rem; background: red; } </style> </head> <body> <div class="box"></div> <script> var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='

  • scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </script> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 2.66666667rem;
        height: 2.66666667rem;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
    <script>
    var scale = 1 / window.devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
 
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    </script>
</body>
</html>

开发浏览器,分别在黑莓6和中兴5下查看页面,我们会发觉,现在的因素得以依照手提式有线电话机的尺寸区别而等比缩放了。

地方的办法是手提式有线电话机天猫的点子,有三个瑕玷,就是转账rem单位的时候,须要除以font-size的值,天猫商城用的是魅族6的布置图,所以天猫商城调换尺寸的时候要除以75,那一个值可倒霉算,所以还要借用总括器来完结,影响开垦效能,别的,在转还rem单位时蒙受除不尽的数时大家会动用相当长的近似值举个例子上面的2.6666667rem,那样大概会使页面元素的尺码有差错。

除此而外上边的主意比较通用之外,还会有一种格局,咱们来再度考虑一下:

地方做页面包车型地铁思路是:得到统一准备图,举个例子HTC6的设计图,我们就将浏览器设置到OPPO6设备调节和测验,然后使用js动态修改meta标签,使布局视口的尺寸等于设计图尺寸,也正是设备像素尺寸,然后采取rem代替px做尺寸代为,使得页面在分裂器械中等比缩放。

近些日子倘诺我们不去修改meta标签,不荒谬使用缩放为1:1的meta标签,即利用如下meta标签:

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

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

还以红米6为例,大家精通,在缩放为1:1的状态下,遵照公式:

设备像素比(DP大切诺基) = 设备像素个数 / 理想视口像素个数(device-width)

大家领略:
器械像素 = 设计图尺寸 = 750px
布局视口 = 375px

设若大家以索爱6设计图尺寸为标准,在设计图的尺码下设置五个font-size值为100px。
也正是说:750px宽的页面,大家设置100px的font-size值,那么页面包车型大巴升幅换算为rem就十三分750 / 100 = 7.5rem。

大家就以页面总宽为7.5rem为标准,那么在布局视口中,也便是页面总宽为375px下,font-size值应该是多少?很简短:

font-size = 375 / 7.5 = 50px

那正是说在BlackBerry5下啊?因为一加5的布局视口宽为320px,所以如若页面总宽以7.5为专业,那么索爱5下大家设置的font-size值应该是:

font-size = 320 / 7.5 =42.666666667px

也正是说,不管在怎么设备下,大家都能够把页面包车型地铁总宽度设为二个以rem为单位的定值,比如本例就是7.5rem,只可是,大家供给依照布局视口的尺码动态设置font-size的值:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

1
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

这么,无论在哪些设备下,我们页面包车型地铁总增加率都以7.5rem,所以大家平昔在设计图上衡量px单位的尺码,然后除以100改换来rem单位后平昔动用就足以了,举例,在HUAWEI6设计图中度量二个因素的尺码为200px,那么转换到rem单位就是200 / 100 = 2rem,因为在不相同器材下大家动态设置了html标签的font-size值,所以分裂道具下同样的rem值对应的像素值是例外的,那样就落实了在区别道具下等比缩放。大家修改html代码如下:

JavaScript

<html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <style> body{ margin: 0; padding: 0; } .box{ width: 2rem; height: 2rem; background: red; } </style> </head> <body> <div class="box"></div> <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 2rem;
        height: 2rem;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
    <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</body>
</html>

刷新页面,分别在Motorola6和vivo5下调节和测量检验查看结果,会开掘如下图,使大家想要的职能,等比缩放,ok,实际上这种做法也是微博的做法:

美高梅游戏网站 19

美高梅游戏网站 20

上面,大家来计算一后一次之种做法:

1、得到统一打算图,总括出页面包车型客车总宽,为了好计算,取100px的font-size,借使设计图是Samsung6的那么合算出的正是7.5rem,如若页面是OPPO5的那么合算出的结果正是6.4rem。
2、动态设置html标签的font-size值:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';

1
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';

如HTC6的希图图便是:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

1
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

三星5的统一筹算图正是:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

1
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

3、做页面是衡量设计图的px尺寸除以100到手rem尺寸。
4、和天猫商城的做法同样,文字字体大小不要接纳rem换算。

上边是这种做法的html模板:

JavaScript

<html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <style> body{ margin: 0; padding: 0; } .box{ width: 2rem; height: 2rem; background: red; } </style> </head> <body> <div class="box"></div> <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 2rem;
        height: 2rem;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
    <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</body>
</html>

是因为这种做法在开拓中换算rem单位的时候只须求将衡量的尺寸除以100就能够,所以不供给动用总结器我们就能够快捷的到位总计转变,所以那也会提高开辟效能,自己也相比较讲究这种做法。

除此以外,无论是第一种做法照旧第三种做法,大家都事关了,文字字体大小是毫无换算成rem做单位的,而是使用媒体询问来开展动态设置,举个例子上面包车型大巴代码即是网易的代码:

代码片段一:

@media screen and (max-width: 321px) { body { font-size:16px } } @media screen and (min-width: 321px) and (max-width:400px) { body { font-size:17px } } @media screen and (min-width: 400px) { body { font-size:19px } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}
 
@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}
 
@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}

代码片段二:

@media screen and (max-width: 321px) { header,footer { font-size:16px } } @media screen and (min-width: 321px) and (max-width:400px) { header,footer { font-size:17px } } @media screen and (min-width: 400px) { header,footer { font-size:19px } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media screen and (max-width: 321px) {
    header,footer {
        font-size:16px
    }
}
 
@media screen and (min-width: 321px) and (max-width:400px) {
    header,footer {
        font-size:17px
    }
}
 
@media screen and (min-width: 400px) {
    header,footer {
        font-size:19px
    }
}

大家计算一下今日头条在文字字体大小上的做法,在媒体询问阶段,分为多个级次分别是:
轻松学习,你该知情的字体。321px以下
321px – 400px之间
400px以上

切切实实文字大小要多少个像素这么些以设计图为准,可是那八个品级之间是有规律的,留神察看开掘,321px以下的显示屏字体大小比321px – 400px之间的荧屏字体大小要小二个像素,而321px – 400px之间的显示器字体大小要比400之上显示器字体大小要小2个像素。依据本条规律,我们根据设计图所在的像素区段先写好该区段的字体大小,然后分别写出其他三个区段的字体大小媒体询问代码就足以了。

到头来码完了那第二篇小说,无力再多说其余的话,望对大家有救助,有个别细节地点尚未前述,其余笔者水平有限,希望大家指正共同提高,多谢。

1 赞 3 收藏 评论

美高梅游戏网站 21

运作时计算私下认可值

JavaScript函数暗中认可值在运作时计算。为了更加好地了然那或多或少,请看之下代码:

function foo(value = koo()) { return value; } function koo() { return "Ignite UI"; } var a = foo(); console.log(a);

1
2
3
4
5
6
7
8
function foo(value = koo()) {
    return value;
}
function koo() {
     return "Ignite UI";
}
var a = foo();
console.log(a);

在函数foo中,参数值的默许值设置为函数koo。在运作时调用函数foo时,将总结函数koo。调用foo函数后,你会收获如下图所示的输出(在那些例子中,我们采纳了Ignite UI框架)。美高梅游戏网站 22

 

parentopener

在说 opener 在此以前,能够先聊聊 <iframe> 中的 parent

美高梅游戏网站,大家驾驭,在 <iframe> 中提供了一个用来老爹和儿子页面交互的指标,叫做 window.parent,大家得以透过 window.parent 对象来从框架中的页面访谈父级页面包车型地铁 window

opener 与 parent 同样,只不过是用于 <a target="_blank"> 在新标签页展开的页面包车型地铁。通过 <a target="_blank"> 展开的页面,能够一贯运用 window.opener 来访谈来源页面包车型客车 window 对象。

宋体(SimSun)

Windows 下大部分浏览器的暗中同意中文字体,是为适应印刷术而产出的一种汉字字体。笔画有粗细变化,是一种衬线字体,金鼎文在小字号下的显示效果还是能接受,可是字号一轮廓验就非常差了,所以利用的时候要小心,不建议做标题字体选用。

起用默许参数

暗中认可参数可供今后的私下认可参数使用。请看下列代码:

function foo(num1 = 9, num2 = num1 + 8){ console.log(num2); } foo();

1
2
3
4
function foo(num1 = 9, num2 = num1 + 8){
    console.log(num2);
}
foo();

在上头的代码中,使用num1的暗中同意值来测算num2的暗许值。调用函数foo时将赢得以下输出:

美高梅游戏网站 23

同域与跨域

浏览器提供了全体的跨域保养,在域名相同一时候,parent 对象和 opener 对象实际就一向是上一级的 window 对象;而当域名不相同期,parentopener 则是透过包装的七个 global 对象。这个 global 对象仅提供丰硕有限的习性访问,而且在那仅部分多少个属性中,大部分也都以不容许访谈的(访谈会一贯抛出 DOMException)。

美高梅游戏网站 24

在 <iframe> 中,提供了二个 sandbox 属性用于调控框架中的页面包车型客车权限,因而固然是同域,也足以垄断 <iframe> 的安全性。

 

Times New Roman

Mac 平台 Safari 下暗许的乌克兰语字体,是最广大且广为人知的西方文字衬线字体之一,众多网页浏览器和文字管理软件都是用它当做暗中认可字体。

结论

JavaScript默许参数在编排函数时非常管用。在调用函数时,如若缺乏参数,则暗许参数作用允许你为函数参数分配默许值,实际不是将其定义为undefined。

1 赞 收藏 评论

美高梅游戏网站 25

利用

倘使,你的网址上有二个链接,使用了 target="_blank",那么一旦顾客点击这一个链接并跻身多个新的竹签,新标签中的页面假如存在恶意代码,就足以将您的网址一向导航到贰个仿真网址。此时,假若顾客回到你的标签页,见到的就是被轮换过的页面了。

sans-serif — 无衬线字体

sans 的意味是无,sans-serif 也正是无衬线的意思。专指西方文字中绝非衬线的书体,与汉字字体中的金鼎文相对应。与衬线字体相反,该类字体日常是形而上学的和统一线条的,它们往往有着同等的曲率,笔直的线条,锐利的拐角。

中文下,无衬线字体正是陶文,甲骨文字也正是又称方体或等线体,未有衬线装饰,字形方正,笔画横平竖直,笔迹全体一律粗细。

拜访又有怎样常见的无衬线字体。

详尽步骤

  1. 在您的网站 https://example.com 上设有一个链接:
&lt;a href="https://an.evil.site"
target="_blank"&gt;进入一个“邪恶”的网站&lt;/a&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6c4939c60150781393-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6c4939c60150781393-1" class="crayon-line">
&lt;a href=&quot;https://an.evil.site&quot; target=&quot;_blank&quot;&gt;进入一个“邪恶”的网站&lt;/a&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 顾客点击了这么些链接,在新的标签页展开了这些网址。这些网址能够通过 HTTP Header 中的 Referer 属性来判断顾客的源于。何况,那一个网址上带有着近乎于那般的 JavaScript 代码:
const url = encodeURIComponent('{{header.referer}}');
window.opener.location.replace('https://a.fake.site/?' + url);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6c4939c6a538489517-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c4939c6a538489517-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6c4939c6a538489517-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6c4939c6a538489517-1" class="crayon-line">
const url = encodeURIComponent('{{header.referer}}');
</div>
<div id="crayon-5b8f6c4939c6a538489517-2" class="crayon-line crayon-striped-line">
window.opener.location.replace('https://a.fake.site/?' + url);
</div>
<div id="crayon-5b8f6c4939c6a538489517-3" class="crayon-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 此时,顾客在雄起雌伏浏览这一个新的标签页,而原来的网站所在的价签页此时曾经被导航到了 https://a.fake.site/?https%3A%2F%2Fexample.com%2F
  2. 恶意网址 https://a.fake.site 根据 Query String 来冒充贰个能够欺诈客商的页面,并突显出来(时期还足以做壹次跳转,使得浏览器的地点栏更具备吸引性)。
  3. 顾客关闭 https://an.evil.site 的标签页,回到原先的网址………………已经回不去了。

上边的口诛笔伐步骤是在跨域的场馆下的,在跨域情形下,opener 对象和 parent 同样,是饱受限制的,仅提供拾壹分有限的属性访谈,何况在那仅部分多少个属性中,半数以上也都以不容许访谈的(访谈会直接抛出 DOMException)。

但是与 parent 差异的是,在跨域的意况下,opener 依然能够调用 location.replace 方法parent 则不得以。

例如是在同域的意况下(比方四个网址上的某二个页面被植入了恶意代码),则情形要比上面严重得多。

编辑:美高梅游戏网站 本文来源:轻松学习,你该知情的字体

关键词:

  • 上一篇:没有了
  • 下一篇:没有了