Snow的个人博客


  • 首页

  • 归档

img 标签的相关操作

发表于 2018-09-30

等比缩放

只设置 img 标签的宽度,不设置高度
1
2
3
.logo > img {
width: 100%;
}

禁用对图片的操作

  1. ondragstart="return false;" // 禁止拖拽图片
  2. oncontextmenu="return false;" // 禁止鼠标右键
  3. ondragstart="return false;" // 禁止鼠标拖动
  4. onselectstart="return false;" // 文字禁止鼠标选中
  5. onselect="document.selection.empty();" // 禁止复制文本
    使用方法如下
    1
    <img src="../images/logo.png" ondragstart="return false;">

移动端自动设置字体大小

发表于 2018-09-30

来自:https://segmentfault.com/a/1190000004189237

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
!function(win, lib) {
var timer,
doc = win.document,
docElem = doc.documentElement,

vpMeta = doc.querySelector('meta[name="viewport"]'),
flexMeta = doc.querySelector('meta[name="flexible"]'),

dpr = 0,
scale = 0,

flexible = lib.flexible || (lib.flexible = {});

console.log(vpMeta, flexMeta)
// 设置了 viewport meta
if (vpMeta) {
console.warn("将根据已有的meta标签来设置缩放比例");
var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);

if (initial) {
scale = parseFloat(initial[1]); // 已设置的 initialScale
dpr = parseInt(1 / scale); // 设备像素比 devicePixelRatio
}

}
// 设置了 flexible Meta
else if (flexMeta) {
var flexMetaContent = flexMeta.getAttribute("content");
if (flexMetaContent) {

var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);

if (initial) {
dpr = parseFloat(initial[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}

if (maximum) {
dpr = parseFloat(maximum[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}

// viewport 或 flexible
// meta 均未设置
if (!dpr && !scale) {
// QST
// 这里的 第一句有什么用 ?
// 和 Android 有毛关系 ?
var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
_dpr = win.devicePixelRatio;

// 所以这里似乎是将所有 Android 设备都设置为 1 了
dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
? 3
: (_dpr >= 2 && (!dpr || dpr >= 2))
? 2
: 1
)
: 1;

scale = 1 / dpr;
}

docElem.setAttribute("data-dpr", dpr);

// 插入 viewport meta
if (!vpMeta) {
vpMeta = doc.createElement("meta");

vpMeta.setAttribute("name", "viewport");
vpMeta.setAttribute("content",
"initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");

if (docElem.firstElementChild) {
docElem.firstElementChild.appendChild(vpMeta)
} else {
var div = doc.createElement("div");
div.appendChild(vpMeta);
doc.write(div.innerHTML);
}
}

function setFontSize() {
var winWidth = docElem.getBoundingClientRect().width;

if (winWidth / dpr > 540) {
(winWidth = 540 * dpr);
}

// 根节点 fontSize 根据宽度决定
var baseSize = winWidth / 10;

docElem.style.fontSize = baseSize + "px";
flexible.rem = win.rem = baseSize;
}

// 调整窗口时重置
win.addEventListener("resize", function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);


// 这一段是我自己加的
// orientationchange(设备的纵横方向改变)时也需要重算下吧
win.addEventListener("orientationchange", function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);


// pageshow
// keyword: 倒退 缓存相关
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);

// 设置基准字体
if ("complete" === doc.readyState) {
doc.body.style.fontSize = 12 * dpr + "px";
} else {
doc.addEventListener("DOMContentLoaded", function() {
doc.body.style.fontSize = 12 * dpr + "px";
}, false);
}

setFontSize();

flexible.dpr = win.dpr = dpr;

flexible.refreshRem = setFontSize;

flexible.rem2px = function(d) {
var c = parseFloat(d) * this.rem;
if ("string" == typeof d && d.match(/rem$/)) {
c += "px";
}
return c;
};

flexible.px2rem = function(d) {
var c = parseFloat(d) / this.rem;

if ("string" == typeof d && d.match(/px$/)) {
c += "rem";
}
return c;
}
}(window, window.lib || (window.lib = {}));

layUI速查表

发表于 2018-09-30

常用class

class名 作用 注释
layui-container 内容
layui-fluid 内容 宽度将不会固定,而是 100% 适应
layui-row 行 栅格系统的行,共12列
layui-col-xs* 列 超小屏(手机<768px)
layui-col-sm* 列 小屏幕(平板≥768px)
layui-col-md* 列 中等屏幕(桌面≥992px)
layui-col-lg* 列 大型屏幕(桌面≥1200px)
layui-col-space1 列之间间隔 1px 另外还有值为:3、5、8、10、12、15、18、20、22、28、30

在mac下使用Nginx

发表于 2018-09-29

安装Nginx

…
…

配置虚拟域名

用一个例子来说明:要给项目文件夹为 /Users/phoenix/Web/HTMLhttp/ 的项目配置虚拟域名为 http://html.server.cn

  1. 在 /etc/hosts 文件里添加

    1
    127.0.0.1       html.server.cn
  2. 在 nginx.conf 文件里添加(我的nginx.conf文件在 /usr/local/etc/nginx 目录下)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    http {
    ...

    //添加以下代码
    server {
    listen 80;
    server_name html.server.cn;
    root /Users/phoenix/Web/HTMLhttp/;
    location / {
    index index.php index.html index.htm;
    }
    }
    }

    或者(我更推荐的方式)
    在 /usr/local/etc/nginx 目录下新建一个文件夹 servers,接着在 servers 文件夹下新建一个配置文件 mynginx.conf (文件名可自定义)
    在 mynginx.conf 文件里添加配置

    1
    2
    3
    4
    5
    6
    7
    8
    server {
    listen 80;
    server_name html.server.cn;
    root /Users/phoenix/Web/HTMLhttp/;
    location / {
    index index.php index.html index.htm;
    }
    }

    然后在 nginx.conf 配置文件里引用 mynginx.conf 配置

    1
    2
    3
    4
    5
    http {
    ...

    include servers/mynginx.conf; // 新增这行代码
    }

layUI学习笔记

发表于 2018-09-29

Hello World

发表于 2018-09-29

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

1…34
Snow Liu

Snow Liu

36 日志
9 标签
© 2018 Snow Liu
由 Hexo 强力驱动
|
主题 — NexT.Pisces v5.1.4