weixin_46064684的博客

移动端布局方式less+rem+@mediarem+@media+less是我们移动端布局的第一种方案。移动端页面设计稿尺寸：– 安卓手机尺寸：320px 360px 375px 384px 400px 414px 500px 720px– 苹果手机尺寸：640px 750px通过less+rem+@media 技术完成页面在各个手机尺寸上的显示手机页面的准备工作：–UI设计师会先给移动端页面设计一个尺寸 如：苏宁的尺寸是 750px–前端开发人员再人为的把设计稿分为若干份 如：苏宁分为

rem布局单位介绍px、em、rem区别介绍px像素（Pixel）是绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。EM特点em的值并不是固定的；em会继承父级元素的字体大小。注意：任意浏览器的默认字体高都是16px。我

less 变量css中的颜色和字号使用less 变量来存储less 变量的命名 @color:red;变量命名的规则：1）必须@符号开头2）名字不能是数字3）名字不能包含特殊字符 @a#! @~col4) 区分大小写@color:red; @n:100px; @font:font-szie:100px;less 嵌套css写法：#header { color: black;}#header .navigation { font-size: 12px;}#hea

流失布局先创建项目文件，在index.html 文件里面添加视口标签分析观察项目结构移动端项目一定要在不同尺寸的设备上面多跑跑，看看页面布局会不会发生变化。百分比布局，不是每一个元素的尺寸必须必须写成百分百。但是百分比布局，宽写百分比，高正常写。背景精灵图写法：先把精灵图放到ps中打开通过ctrl+alt+i 打开图像大小 约束比例选对勾把原图改小50% 假如原图大小是400400 改成200200在通过ps矩形选框工具量一下图形在 x y轴的距离 写到css里面在

浏览器分为2种：一种是pc端浏览器（谷歌，火狐，IE，欧朋，其他）一种是m端浏览器移动端浏览器只需要做 -webkit-兼容就行.pc端页面需要兼容各个浏览器，移动端页面需要兼容各个手机尺寸什么是视口viewport ： 视口，视口就是浏览器显示内容的区域。视口的分类：PC 端：视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。移动端分为三个视口：布局视口、视觉视口和理想视口。（理想视口是我们布局常用的视口）理想视口的设置<meta name="viewp

媒体查询：媒体查询是css3新的语法：@media only screen and (min-width: ) { 属性：属性值； }@media only screen and (min-width: 100px) and (max-width: 640px) { 属性：属性值； }screen 用于电脑屏幕，平板电脑，智能手机等。only 唯一（忽略）and 并且（不常用）min-width 屏幕最小宽度值max-width 屏幕最大宽度值媒体查询的作用：

audio 音频音频属性controls控制面板src 路径loop 循环次数 autoplay 自动播放muted 静音播放video 视频视频属性width 宽height 高poster 指定播放开始画面source 浏览器对视频的格式要求不一样，为了兼容浏览器，所以用到source标签source标签可以让浏览器自己选择可以播放的视频格式举例： <video width="800" height=""> //source指的是数据来源

表单中新增的控件(type属性)email: 提交表单时检测值是否是一个电子邮件格式url: 提交表单时检测值是否是一个url格式date: 年-月-日格式的控件time: 时:分格式的控件datetime: 年-月-日 时:分 格式的控件（UTC时间）datetime-local: 年-月-日 时:分 格式的控件（本地时间）month: 年-月格式的控件week: 年-周数格式的控件number: 数字输入框<input type="number" name="" id="" v