1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 <meta name="keywords" content="关键字 关键词"> <!--/*-优化-*/-->
7 <meta name="Description" content="简介">
8 <title></title>
9 </head>
10 <body>
11
12
13 <script type="text/javascript" src="js/flexible.js" ></script>
14 </body>
15 </html>
16 <!--
17 移动端
18
19 视口：
20 就是浏览器显示内容的平面区域
21 视口分为：布局视口、视觉视口、理想视口
22 布局视口：
23 一般移动端设备的浏览器都默认哟个布局视口，为了解决早期px端页面在移动端的显示问题
24 苹果、安卓 基本上设置这个视口的分辨率980px
25 视觉视口：
26 你看到的网页区域，指的是网址的区域
27 通过缩放去操作视觉，视口不会影响布局视口
28
29 理想视口：
30 1：是网站在移动设备的浏览器中最理想的状态（浏览和也读宽度设定）
31 2：对设备来说就是最理想的尺寸
32 3：引入一个meta标签，通知浏览器进行对应的操作
33 4：meta标签的主要目的就是为了使布局时机的宽度一个与理想窗口的宽度一致，就是设备有多宽，布局就有多宽
34 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
35
36 width=device-width 当前的宽度与当前设备的宽度一致
37 initial-scale=1 初始的缩放比例（默认为1）
38 minimum-scale=1 允许用户缩放到的最小比例（默认为1）
39 maximum-scale=1 允许用户缩放到的最大比例（默认为1）
40 user-scalable=no 用户是否可以收到缩放（默认不允许）因为我们不希望用户去放大缩放页面
41 注意：移动端必须加meta标签，且禁止用户缩放
42
43
44 视口缩放：
45 在375px的设备截图出来到ps中测量时750px
46 在ps中值比设备中的px值大一倍
47
48 物理像素：
49 1：指的就是屏幕像素的最小的点，是真实存在，设备厂商在生产设备是已经固定好了的，比如苹果的678 750*1334
50 2：视网膜高清显示屏，retina显示屏，作用是把更多的物理像素点压缩至一块屏幕里，像素点越密集，看得越清晰，达到更高的分辨，提高画质
51
52 了解：
53 ppi：每英寸所显示的像素点的密度
54 dpi：每英寸所显示的像素点的点数
55
56 物理像素比:dpr=物理像素/逻辑像素
57 物理像素：设备所显示的像素（手机截图在ps中量出来的像素大小）
58 逻辑像素：页面在css中书写的像素
59
60 常见的设计稿：
61 设计图 640px dpr2
62 750px dpr2
63 1125px dpr3
64
65 常见的单位：
66 px 像素
67 em
68 pt（磅）更多应用于安卓
69 deg 角度
70 %
71 rem：跟随html的font-size：；值的大小
72 默认状态下1rem=16px
73
74 vw： 视口的宽度 width:100vw; 占满整个视口的宽度
75 能够随着视口的宽度变化而变化
76 vh： 视口的宽度 height:100vh; 占满整个视口的高度
77 能够随着视口的高度变化而变化
78
79 wmin：作比较，窗口的宽高谁小，显示小的
80 vmax：作比较，窗口的宽高谁大，显示大的
81
82 写移动端步骤
83 第一步：添加meta标签
84 <meta name="viewport" content=<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
85 第二步：添加heml{font-size:;}
86 第三步：在ps中测量的尺寸除以dpr再除以100.转化为rem单位
87
88 网格布局：
89 display:;
90 display:grid;
91 display:inline-grid;
92
93 容器（父元素）
94 划分行：
95 grid-template-rows:;
96 px
97 %
98 重复：repeat（3,1fr) 行数，均分
99
100 划分列：
101 grid-template-coloumns:;
102 px
103 %
104 repeat
105
106 划分区域：
107 grid-template-areas:
108 "a1 a2 a3"
109 "a4 a5 a6";
110 注意：必须分了行和列，子元素占区域需结合项目grid-area
111
112 行间距：
113 grid-row-gap:1px;
114 列间距：
115 grid-column-gap:1px;
116
117 综合写法：
118 grid-gap:10px 30px;行 列
119
120 综合写法：
121 grid-template:
122 "a1 a1 a2" 1fr
123 "a3 a3 a2" 1fr
124 "a4 a4 a4" 1fr/1fr 1fr 2fr;
125
126 网格整体水平位置：
127 justify-conetent:;
128 start 起始位置
129 center 中间
130 end 结束位置
131 stretch 默认，没指定大小会拉伸
132 网格整体水平位置：
133 align-conetent:;
134 start 起始位置
135 center 中间
136 end 结束位置
137 stretch 默认，没指定大小会拉伸
138 space-around 两端平分
139 space-between 两端对齐
140 space-evenly 平均分配剩余空间
141
142 综合写法：
143 place-content:end start;垂直 水平
144
145 指定网格的垂直 水平呈现方式
146 align-items:end;
147 justifty-items:start;
148
149 综合写法：
150 place-items:center center;
151
152 项目（子元素）
153 grid-area:;
154 方式一：
155 容器属性：gird-template-areas:
156 "a1 a2 a2"
157 "a3 a3 a3";
158 项目属性：grid-area:a1;
159
160 方式二：
161 grid-area:2/1/4/3; 行起点/列起点/行结束/列结束
162
163 grid-column-start:列线开始;
164 grid-cloumn-end:列线结束;
165 grid-row-start:行开始;
166 grid-row-end:行结束;
167 grid-area:2/1/4/3; 行起点/列起点/行结束/列结束
168
169 只有end有span 意思是占几个网格 3指占三个
170 grid-column-end:span 3;
171 grid-row-end:span 1;
172
173
174 综合写法：
175 grid-column:1 2;从1开始，2结束
176 grid-column:1/span 2;从1开始，占2格
177
178 单个网格的当个内容水平、垂直对齐方式
179 justify-self:;
180 align-self:;
181
182 图片整合：css精灵、css精灵图、雪碧图、csssprties
183
184 优点：
185 1：减少对服务器端的请求，加载速度快
186 2：相对减少图片的体积
187 3：减少图片的命名，提高工作效率
188 4：在设置样式时，只需要改一个属性就能达到页面要求
189
190 借助工具使用步骤：
191 1：打开工具，把需要的图拽进去
192 2：移动图片位置
193 3：设置，生成设置，修改图片格式为.png
194 4：生成图片
195
196 精灵图使用：
197 1：添加背景图
198 2:通过background-position:;改变图片位置
199
200 浏览器大战：各大浏览器之间的市场份额竞争
201
202 浏览器竞争带来的进步：
203 1：竞争能促进浏览器市场的发展
204 2：满足越来越多的用户需求
205 3：修正自身的各种问题
206
207 浏览器竞争带来的问题：
208
209 主流浏览器
210 谷歌
211 火狐
212 苹果
213 欧鹏
214 IE
215
216 浏览器内核（核心源码）
217 trident 代表作：ie
218 Gecko 代表作：mozilla
219 Wedkit 代表作苹果& 谷歌旧版本
220 Blink 代表作：谷歌&欧鹏
221
222 因为浏览器内核不一样，所以出现各种兼容性问题
223 bug 问题
224 hack 解决方法
225 filter 过滤器
226
227 经典的ie低版本bug（了解）
228 bug1：图片img有超链接上，会有蓝色边框
229 hack：img{border:none/0;}
230
231 bug2：图片下方默认带有大约3px的间距
232 hack1：跟着父级不换行写
233 hack2：给img添加display:block;
234
235 bug3：双倍浮动外边距
236 意思是：一个元素添加margin-left:20px;将出现margin-left:40px;
237 hack：给浮动元素添加display:inline;
238
239 bug4：默认高度
240 意思是：当元素的height:;值小于16px，低版本ie将保持16px
241 hack：font-size:0;/overflow:hidden;
242
243 常见的bug：
244 bug5:表单元素对齐方式不一致
245 意思是：表单元素行高对齐方式不一致
246 hack:给表单元素添加float:left;
247
248 bug6:表单元素按钮不一致
249 hack1:统一大小
250 hack2:用a标签模拟（脚本）
251 hack3:input外面套一个标签。然后在这个标签里写样式，把input的边框去掉
252 hack4:如果这个是一个图片按钮。直接使用背景图作为按钮的图片即可
253
254 bug6: 鼠标指针
255 cursor:hand;（高版本浏览器不支持）
256 hack：cursor:pointer; 小手
257 cursor:auto; 默认效果
258 cursor:text; 文本
259 cursor:crosshair; 加号
260 cursor:wait; 等待
261 cursor:help; 帮助
262 cursor:progress;
263 cursor:inherit;
264 cursor:move； 移动
265 cursor:ne-resize 向上或者向右移动
266 cursor:
267
268 bug7:opacity:;让元素透明（ie低版本不识别）
269 取值：0-1
270 hack:让ie识别
271 filter:alpha(opacity=50);
272
273 过滤器：
274 下划线过滤器：
275 例：_height:100px;
276 !important过滤器：ie6-不识别
277
278 *过滤器： ie7识别
279 \9: ie浏览器识别
280 \0: ie8+识别
281
282 优化：
283 1：标题优化
284 有网站的标题 主要内容
285
286 2：页面头部优化
287 <meta name="keywords" content="关键字，关键词"/>
288 列出合理的，而且能够突出网站内容的词，字，就可以了，不要太多，8-10个差不多
289
290 <meta name="Description" content="简介或者描述"/>
291 内容：尽可能精简精准的描述网站的内容
292
293 3：超链接优化
294 1）采用纯文本做超链接，少用flash动画设置链接，因为搜索引擎不喜欢
295 2）规范书写超链接，title标签要写上
296 3）最好不要使用图片热点做超链接
297
298 4：图片优化
299 要加上alt属性
300
301 5：友情链接
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357 -->
浙公网安备 33010602011771号