forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1048-css-2.html
212 lines (205 loc) · 9.16 KB
/
1048-css-2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' :
'../css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<style>
.reveal pre code {
background-color: #120;
}
</style>
</head>
<body>
<img src="./img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h4>小课堂【武汉】</h4>
<h4>手机分辨率和网页中的px是一回事吗？</h4>
<h4>分享人：关楠</h4>
</section>
<section>
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p>首先，什么是viewport</p>
</section>
<section>
<p>通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域</p>
<p>再具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。</p>
</section>
</section>
<section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<h3>a.移动设备的默认viewport：</h3>
<p>为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）</p>
</section>
<section>
<h3>b.css中的px、移动设备的分辨率以及UI口中的‘像素’分别怎么理解</h3>
</section>
<section>
<p>css中的px：</p>
<p>在桌面浏览器：1px（下面我们读成‘css像素’）代表1个物理像素，也就是1css像素 = 1物理像素</p>
<p>没有加meta viewport标签时候：移动端viewport宽度为980px或者1024px，这时候1css像素不确定是几个物理像素（根据分辨率来算）</p>
<p>写个20px的文字看看效果（见演示）</p>
</section>
<section>
<p>在加了meta viewport标签以后呢？我们引入另外一个单位：密度独立像素dp/dip</p>
<p>dp/dip是在不同设备都显示为同一大小的单位（见演示）</p>
<p>简单理解，在使用了<xmp><meta name="viewport" content="width=device-width, initial-scale=1"></xmp>之后，所有1px = 1dp/dip</p>
<p>添加meta标签后20px的文字（见演示）</p>
</section>
<section>
<p>设备的独立像素都是可以查到的</p>
<a href="http://blog.chengyunfeng.com/devices/">dp</a>
</section>
<section>
<p>移动设备的分辨率：</p>
<p>说到移动设备分辨率，这里先提另一个单位dpi(dot per inch)</p>
</section>
<section>
<p>dpi/ppi是表示一个每inch多少个物理像素dot的单位</p>
<p>在最开始是160dpi/ppi</p>
<p>后来因为技术的提高，为了追求高清屏幕，有了320dpi/ppi以上等等的屏幕</p>
</section>
<section>
<p>下面继续说移动设备分辨率</p>
<p>我们可以理解分辨率就是长宽分别有多少个物理像素dot</p>
<p>但是设备大小就那么大，所以同样大小的设备，分辨率越高，物理像素堆得越多，屏幕越清晰，也就是dpi越高（见演示）</p>
</section>
<section>
<p>UI口中的‘像素’</p>
<p>UI图中的像素，也就是psd中我们量出来的像素，比如说任务中psd图的宽度为750px或者640px（见演示）</p>
<p>UI口中的像素是移动设备分辨率</p>
</section>
</section>
<section>
<section>
<h3>3.常见问题</h3>
</section>
<section>
<h3>UI图拿到之后，宽度是750px或者640px怎么办？</h3>
</section>
</section>
<section>
<section>
<h3>4.解决方案</h3>
</section>
<section>
<p>不负责任的说法：除以2写到css里</p>
</section>
<section>
<p>更不负责任的说法：使用js动态控制viewport，这个这次就不讲了，自己查</p>
</section>
</section>
<section>
<section>
<h3>5.编码实战</h3>
</section>
<section>
<h3>前面演示得不够多？</h3>
</section>
</section>
<section>
<section>
<h3>6.扩展思考</h3>
</section>
<section>
<p>1.如何使用js动态控制viewport</p>
<p>2.如何理解其他vw、vh等单位</p>
</section>
</section>
<section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
<a href="https://www.cnblogs.com/2050/p/3877280.html">移动前端开发之viewport的深入理解 </a>
<a href="https://www.cnblogs.com/lidongfeng/p/7243650.html">深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局 </a>
</section>
</section>
<section>
<section>
<h3>8.更多讨论</h3>
</section>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>By<small style="vertical-align: middle">关楠</small></p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{src: './plugin/markdown/marked.js'},
{src: './plugin/markdown/markdown.js'},
{src: './plugin/notes/notes.js', async: true},
{
src: './plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>