git文章
This commit is contained in:
结发受长生
@@ -0,0 +1,109 @@
|
||||
---
|
||||
title: CSS中的字体
|
||||
date: 2018-4-7 10:55:37
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
在CSS当中 , 我们通常使用`@font-face`来定义字体
|
||||
除了可以引入外部字体之外 , 也可以给系统本地的字体定义别名
|
||||
比如
|
||||
```css
|
||||
@font-face {
|
||||
font-family : YH;
|
||||
src : local("microsoft yahei");
|
||||
}
|
||||
.font {
|
||||
font-family:YH;
|
||||
}
|
||||
```
|
||||
这样我们就可以在需要使用这个字体的地方直接使用这个别名
|
||||
<!-- more -->
|
||||
> 通常不推荐在网页当中引入外部的中文字体包
|
||||
> 因为中文字体包通常很大 , 会导致严重的加载缓慢
|
||||
|
||||
然而在Mac系统当中没有微软雅黑字体 , 我们希望在Mac系统上使用苹方字体 , windows系统上使用微软雅黑字体
|
||||
```css
|
||||
@font-face {
|
||||
font-family : BASE;
|
||||
src: local("PingFang SC"),
|
||||
local("Microsoft Yahei");
|
||||
}
|
||||
```
|
||||
这样字体的应用就更加简便了
|
||||
|
||||
### unicode-range
|
||||
这个属性可以给特定的字符指定特定的字体
|
||||
通过unicode编码去指定字符
|
||||
比如我们需要给一段文字当中的引号使用宋体 , 其他的文字使用微软雅黑或者苹方字体
|
||||
可以这样做
|
||||
```css
|
||||
@font-face {
|
||||
font-family: BASE;
|
||||
src: local('PingFang SC'),
|
||||
local('Microsoft Yahei');
|
||||
}
|
||||
@font-face {
|
||||
font-family: quote;
|
||||
src: local('SimSun');
|
||||
unicode-range: U+201c, U+201d;
|
||||
/* 中文前引号与后引号对应的unicode编码 */
|
||||
}
|
||||
.font {
|
||||
font-family: quote, BASE;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
> FireFox浏览器对字体名称的大小写敏感
|
||||
|
||||
unicode-range的用法
|
||||
```css
|
||||
/* 支持的值 */
|
||||
unicode-range: U+26; /* 单个字符编码 */
|
||||
unicode-range: U+0-7F;
|
||||
unicode-range: U+0025-00FF; /* 字符编码区间 */
|
||||
unicode-range: U+4??; /* 通配符区间 */
|
||||
unicode-range: U+0025-00FF, U+4??; /* 多个值 */
|
||||
```
|
||||
|
||||
> **前端领域的字符表示方式总结**
|
||||
> 1. HTML中字符输出使用`&#x`配上charCode值
|
||||
> 2. 在JavaScript文件中为防止乱码转义，则是`\u`配上charCode值
|
||||
> 3. 在CSS文件中，如CSS伪元素的content属性，直接使用`\`配上charCode值
|
||||
> 4. unicode-range是`U+`配上charCode值
|
||||
|
||||
----
|
||||
### 补充 : **使用千位分隔符表示大数字**
|
||||
在移动端 , 对于超过一定个数的连续数字 , 系统会默认当做电话号码来处理 , 而不是一个数字
|
||||
点击这个数字的时候 , 可以触发系统的电话呼叫
|
||||
|
||||
如果我们想干掉这个特性 , 通常的做法是使用`<meta>`标签
|
||||
```xml
|
||||
<meta name="format-detection" content="telephone=no"
|
||||
```
|
||||
这样就意味着本来可以进行便捷呼叫的手机号码 , 变成了一串普通的数字
|
||||
对于确实表示数字含义的一串数字来说 ( 不是编码或者流水号之类的内容 ) , 只是这样做也是影响体验的
|
||||
它本身也不方便进行辨识
|
||||
我们可以考虑将其格式化为包含千位分隔符的一个字符串
|
||||
|
||||
处理方式
|
||||
#### 正则表达式
|
||||
用法举例
|
||||
```javascript
|
||||
String(123456789).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
|
||||
```
|
||||
#### 使用`toLocalString()`方法
|
||||
用法举例
|
||||
```javascript
|
||||
(123456789).toLocaleString('en-US');
|
||||
```
|
||||
对于中文场景下，toLocaleString('en-US')中的'en-US'理论上是可以缺省的
|
||||
但是如果产品可能海外用户使用，则保险起见，还是保留'en-US'
|
||||
|
||||
在这种情况下 , 如果我们想要美化这个逗号
|
||||
使用JS进行筛选处理会十分繁琐
|
||||
我们就可以使用`unicode-range`单独对其中的逗号进行处理
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: HTML5的缓存策略
|
||||
date: 2018-4-10 13:01:24
|
||||
tags:
|
||||
- HTML5
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
HTML5当中新增了两种浏览器端的缓存方式
|
||||
分别是`sessionStorage`和`localStorage`
|
||||
|
||||
+ **sessionStorage** - 用于会话级别数据的缓存 , 这些数据只有在同一个会话中的页面才能访问 , 当会话结束后数据就会随之销毁
|
||||
+ **localStorage** - 用于持久化的本地存储 , 除非主动删除数据 , 否则数据是永远不会过期的
|
||||
<!-- more -->
|
||||
在此之前 , 本地缓存的方式主要就是cookie
|
||||
但是cookie有很多弊端 , 比如
|
||||
+ 存储容量是受限的
|
||||
+ 每次请求一个新的页面 , cookie都会被带过去 , 浪费了带宽
|
||||
+ 无法跨域调用
|
||||
+ 明文存储 , 安全性很差
|
||||
|
||||
当然有了web storage , 也并不能完全取代cookie , 因为cookie的作用是与服务器进行交互 , 作为HTTP规范的一部分而存在 , 而Web Storage仅仅是为了在本地存储数据而已
|
||||
|
||||
---
|
||||
在支持web storage的浏览器当中 , `sessionStorage`和`localStorage`都是window当中的全局对象 , 可以直接使用
|
||||
用法都很简单
|
||||
|
||||
可以直接使用继承自原型对象的这几个方法 , 添加 获取 移除 键值对 , 也可以当做普通的JS对象来使用 , 直接给对象属性赋值
|
||||
|
||||
```javascript
|
||||
localStorage.setItem("name","Sookie");
|
||||
//或者 localStorage.name = "Sookie";
|
||||
localStorage.getItem("name");
|
||||
//或者 localStorage.name;
|
||||
localStorage.removeItem("name");
|
||||
//或者 delete localStorage.name
|
||||
```
|
||||
除此之外 , `key()`方法可以获取到Storage当中指定索引的键 , 与length配合可以用于遍历所有缓存的数据
|
||||
|
||||
```javascript
|
||||
for(let index=0 ; index<localStorage.length ; index++) {
|
||||
let key = localStorage.key(index);
|
||||
let value = localStorage.getItem(key);
|
||||
console.log(key + " = " + value);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
####事件
|
||||
浏览器提供了`storage`事件 , 用于监听**localStorage**的变化
|
||||
> 需要注意的是 , 在某一个页面设置这个事件的回调函数之后 , 在本页面对localStorage进行操作 , 是不会触发这个事件的 , 在另外一个标签中打开该页面 , 才会触发这个事件
|
||||
|
||||
```javascript
|
||||
window.addEventListener("storage",function(e){
|
||||
console.log(e);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
---
|
||||
title: viewport
|
||||
date: 2018-4-9 11:01:56
|
||||
tags:
|
||||
- 前端
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
在移动设备上的页面开发 , 首先需要搞清楚的就是`viewport` , 这是适配和响应各种不同分辨率的移动设备的前提条件
|
||||
|
||||
#### 概念
|
||||
通俗地讲 , 移动设备上的viewport是指设备的屏幕上能用来显示网页的那块区域
|
||||
<!-- more -->
|
||||
> 关于**像素(px)**
|
||||
> 这是css当中常见的定义像素值的单位
|
||||
> 但是这个值并不能完全等同于设备的物理像素
|
||||
> 因为页面是可以被缩放的 , 如果缩放到2倍
|
||||
> 那么1px在页面上就会占用2个物理像素的距离
|
||||
|
||||
#### 移动设备的3个viewport
|
||||
##### layout viewport
|
||||
|
||||
它的宽度是大于浏览器可视区域的宽度的
|
||||
宽度值可以通过`document.documentElement.clientWidth`来获取
|
||||
还需要一个viewport来代表浏览器可视区域的大小
|
||||
|
||||
##### visual viewport
|
||||
|
||||
它的宽度可以通过`window.innerWidth`来获取
|
||||
|
||||
现在已经有两个viewport了 , 但是浏览器还觉得不够 , 因为越来越多的网站都会为移动设备进行单独的设计 , 所以还必须要有一个能完美适配移动设备的viewport
|
||||
> 完美适配指的是 :
|
||||
> 1. 不需要用户缩放和横向滚动条就能正常地查看网页的所有内容
|
||||
> 2. 显示的文字大小合适 , 不会因为在高密度像素的屏幕里显示得太小而无法看清 . 当然不只是文字 , 其他元素的大小也是同样的道理
|
||||
|
||||
##### ideal viewport
|
||||
这是移动设备的理想viewport , 它并没有一个固定的尺寸 , 不同的设备有不同的尺寸
|
||||
例如所有iphone设备的ideal viewport的宽度都是320px , 无论它的屏幕宽度是320还是640
|
||||
安卓设备则比较复杂 , 有很多不同的值
|
||||
页面中元素大小如果根据ideal viewport来适配 , 则不会出现在像素密度太高的屏幕上 , 元素显示太小的问题了
|
||||
|
||||
#### 利用meta标签对viewport进行控制
|
||||
移动设备默认的viewport是layout viewport , 但是在进行移动设备网站的开发时 , 我们需要的是ideal viewport
|
||||
通常需要在head标签当中添加
|
||||
```xml
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
```
|
||||
属性说明 :
|
||||
+ `width` - 控制viewport宽度 , 可以指定一个值 , 或者特殊的值 , **device-width**为设备的宽度
|
||||
+ `height` - 与width相对应 , 指定高度 , 这个属性并不重要 , 很少使用
|
||||
+ `initial-scale` - 初始缩放比例 , 比如1.0
|
||||
+ `maximum-scale` - 允许用户缩放到的最大比例
|
||||
+ `minimum-scale` - 允许用户缩放到的最小比例
|
||||
+ `user-scalable` - 用户是否可以手动缩放 , 值为yes或者no
|
||||
|
||||
要得到ideal viewport只需要把width设置为**device-width**即可
|
||||
需要说明的是 , 有关缩放的属性都是相对于ideal viewport进行缩放的
|
||||
所以如果只写
|
||||
```xml
|
||||
<meta name="viewport" content="initial-scale=1" />
|
||||
```
|
||||
也可以达到ideal viewport的效果
|
||||
|
||||
---
|
||||
#### 视区的相关单位
|
||||
+ `vw` - 相对于视区的宽度 , 视区总的宽度为100vw
|
||||
+ `vh` - 相对于视区的高度 , 视区总的高度为100vh
|
||||
+ `vmin` - 相对于视区的宽度与高度当中较小的一个
|
||||
+ `vmax` - 相对于视区的宽度与高度当中较大的一个
|
||||
|
||||
比如某种情况下视区的宽度为1000px
|
||||
div的width为2vw , 那么这个div的实际显示宽度就是20px
|
||||
高度同理
|
||||
|
||||
##### 实际应用
|
||||
1. 弹性布局
|
||||
|
||||
实践当中 , 如果我们需要把两个元素横向并排布局
|
||||
设置浮动之后 , 分别指定宽度为25%与75%
|
||||
与指定宽度为 25vw和75vw
|
||||
相比并没有什么优势 , 实际的作用也是一样的
|
||||
|
||||
在布局方面要发挥更大的作用 , 需要结合一个CSS的函数`calc`
|
||||
就是calculate的缩写
|
||||
这个函数的作用是**执行表达式的计算**
|
||||
|
||||
如果不使用这个函数 , 我们通常是需要使用一些预处理工具 , 比如sass , 才能在css当中编写表达式
|
||||
让预处理工具在打包css代码的过程中完成这个计算
|
||||
但是这样终究比较局限 , 因为视区的宽度高度是页面实际渲染的时候才确定的
|
||||
如果涉及到视区的计算 , 则无法完成
|
||||
|
||||
回到最初的问题 , 按照宽度的百分比横向排列两个div
|
||||
直接用百分比当然是可以的 , 但是如果这个元素有 **border margin padding**当中的任意一个 , 右边的div就会被挤到下一行
|
||||
( 如果是单个元素宽度100%的话 , 盒子会被撑破 , 超出父元素的宽度 )
|
||||
|
||||
这时候我们就可以用calc函数配合vw来解决这个问题
|
||||
```css
|
||||
.left,.right {
|
||||
height : 600px;
|
||||
border : 3px solid black;
|
||||
}
|
||||
.left {
|
||||
background : blue;
|
||||
width : calc(25vw - 6px);
|
||||
}
|
||||
.right {
|
||||
background : pink;
|
||||
width : calc(75vw - 6px);
|
||||
}
|
||||
```
|
||||
> 出于兼容性的考虑 , 最好给calc加上`-webkit-`和`-moz-`的前缀
|
||||
|
||||
|
||||
2. 弹性字体
|
||||
|
||||
在响应式布局中 , 字体的大小最好是能跟随视区的大小进行自动调整
|
||||
才能达到比较好的体验
|
||||
可以采用如下方式
|
||||
```css
|
||||
:root {
|
||||
font-size: calc(1vw + 1vh + .5vmin);
|
||||
}
|
||||
```
|
||||
`:root`伪类匹配DOM文档树的根元素
|
||||
|
||||
> **补充说明**
|
||||
> 使用视区的相关单位的值对应的属性 , 不会跟随页面的缩放变化
|
||||
> 比如第二个例子当中的字号
|
||||
> 在放大页面的时候 , 文字的大小是不会改变的
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: 响应式布局
|
||||
date: 2018-4-6 10:55:37
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
#### 媒体查询
|
||||
媒体查询可以使用`@media`在css样式当中进行断点 , 让指定的css样式按照要求进行生效
|
||||
```css
|
||||
@media (max-width:768px) {
|
||||
.box {
|
||||
color : red;
|
||||
}
|
||||
}
|
||||
```
|
||||
上面写在媒体查询当中的css代码 , 在页面视窗宽度小于768px时生效
|
||||
<!-- more -->
|
||||
##### 根据媒体类型进行断点
|
||||
+ all 所有设备
|
||||
+ print 用于打印机和打印预览
|
||||
+ screen 用于电脑屏幕 平板电脑 智能手机等
|
||||
+ speech 屏幕阅读器等发声设备
|
||||
|
||||
##### 逻辑操作符
|
||||
使用逻辑操作符可以构建复杂的媒体查询 , 有`and` , `not` , `only`等
|
||||
```css
|
||||
@media (min-width: 700px) and (orientation: landscape) {
|
||||
/* 宽度大于700并且横屏的时候应用该效果 */
|
||||
.box1 { color: red; }
|
||||
}
|
||||
```
|
||||
只用于屏幕显示( 打印输出不生效 )
|
||||
```css
|
||||
@media only screen and (max-width:1150px){
|
||||
div{border:solid 1px;}
|
||||
}
|
||||
```
|
||||
|
||||
##### 按需加载CSS
|
||||
其实与上面的媒体查询作用是一样的 , 只不过在页面引入css时添加媒体查询条件
|
||||
```xml
|
||||
<link type="text/css" rel="stylesheet" href="base.css" media="(max-width:500px)"/>
|
||||
```
|
||||
浏览器在执行渲染的时候 , 实际和媒体查询是一样的 , 相当于给整个文件当中的css包装了一层媒体查询
|
||||
|
||||
#### REM
|
||||
这是一个应用于长度的单位 , 所有可以用长度值来声明的CSS样式 , 都可以以它当做单位 , 比如width , font-size等等
|
||||
|
||||
这个单位代表的是相对于`html`的`font-size`的值
|
||||
比如
|
||||
```css
|
||||
html {
|
||||
font-size:100px;
|
||||
}
|
||||
body {
|
||||
/* 为了防止元素继承html的字号,干扰全局样式,所以重置为默认 */
|
||||
font-size:initial;
|
||||
}
|
||||
.box2 {
|
||||
width : 0.5rem;
|
||||
}
|
||||
```
|
||||
那么box2的实际宽度就是 0.5 × 100px = 50px
|
||||
基于这种机制 , 我们就可以编写页面`resize事件`的回调函数
|
||||
在函数当中获取当前视窗的宽度与高度 , 去动态改变根元素(html节点)的font-size的值
|
||||
从而让页面中的元素适应视窗大小的变化
|
||||
( 假定设计稿给出的宽度是750px )
|
||||
```javascript
|
||||
(function (doc, win) {
|
||||
var docEl = doc.documentElement,
|
||||
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
|
||||
recalc = function () {
|
||||
var clientWidth = docEl.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
|
||||
};
|
||||
|
||||
if (!doc.addEventListener) return;
|
||||
win.addEventListener(resizeEvt, recalc, false);
|
||||
doc.addEventListener('DOMContentLoaded', recalc, false);
|
||||
})(document, window);
|
||||
```
|
||||
|
||||
#### 设置viewport的width
|
||||
这种方案 , 就是直接指定viewport的width大小
|
||||
```xml
|
||||
<meta name="viewport" content="width=750" />
|
||||
```
|
||||
但是使用了这种方案之后
|
||||
因为已经将宽度定死了 , 所以针对宽度执行的媒体查询就会失效
|
||||
存在很大的弊端
|
||||
而使用REM方案是可以使用媒体查询的
|
||||
Reference in New Issue
Block a user