随笔分类 - 前端-H5
前端H5的一些知识
摘要：移动端布局和我们以前学习的PC端有所区别： 单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 响应式页面兼容移动端（其次） 媒体查询 bootstrap 流式布局 流式布局，就是使用百分比布局，也称为非固定像素布局。 通过合资
阅读全文
摘要：移动端主流方案 1、单独制作移动端页面（主流） 京东、淘宝 苏宁易购手机版 2、响应式页面兼容移动端（其次） 三星手机官网 通过判断设备，如果是移动端设备打开，则跳到移动端页面。 移动端技术解决方案： 移动端浏览器基本以webkit内核为主，因此我们需要考虑webkit兼容性问题。 浏览器私有前缀考
阅读全文
摘要：background-size属性规定背景图像的尺寸 background-size:背景图片宽度 背景图片的高度； 可取如下的值： 例：我们有一个50*50的盒子需要一个背景图片，但是根据分析这个图片还是 需要准备2倍，100*100。我们需要把这个图片缩放一半 50*50，我们使用backgro
阅读全文
摘要：物理像素和物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是产商在出厂时就设置好了，比如苹果6\7\8 是750*133 我们开发时候的1px不是一定等于1个物理像素的。PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同 1px可以显示的物理像素点的个数，称为物理像素比
阅读全文
摘要：视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口 布局视口 （layout viewport） 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起的PC端页面在手机上显示的问题 IOS，Android基本都将这个视口分辨率设置为980px，所
阅读全文
摘要：知道移动问的开发现状 写出标准的viewport 会移动web的调试方法 说出移动端常见的布局方案 能描述流式布局 独立完成移动端布局 需要的知识：移动端基础、视口、二倍图、移动端调试、移动端技术解决方案、移动端常见布局、移动端开发之流式布局、移动端首页制作 移动端调试方法： Chrome DevT
阅读全文
摘要：控制子元素是否开启三维立体环境 transform-style:flat 子元素不开启3D立体空间 默认的 transform-style:perserve-3d 子元素开启立体空间 代码写给父级，但是影响的是子盒子 这个属性和重要，写3D的时候会用到 实现如下效果 思路：两个盒子，相对于父元素进行
阅读全文
摘要：3D是有三维坐标系的 三维坐标系其实就是立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：垂直向下 注意：y下面是正值，上面是负值 z轴：垂直屏幕 注意：z往外是正值，往里是负值 主要学习知识 3D位移：translate3d(x,y,z) 3D旋转：r
阅读全文
摘要：实现下图的功能 思路： 利用动画拖动背景图片，动画设置步长，这种情况要特别注意动画在100%的时候最后落的位置，我这个代码就是100%最后设置为right bottom没有到达预期的效果，最后设置-1600px才可以 <!DOCTYPE html> <html lang="en"> <head> <
阅读全文
摘要：动画的速度曲线如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要：如图所示：显示如下功能： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
阅读全文
摘要：实现如上功能，需要分为五个状态，状态如下： 代码如下； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
阅读全文
摘要：动画 animation是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 动画的基本使用 先定义动画 再使用（调用）动画 用keyframes定义动画（类似定义类选择器） @key
阅读全文
摘要：如下效果的实现是通过scale来完成的 使用hover配合scale以及transition过渡来实现 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
阅读全文
摘要：可以设置元素转换的中心点 语法：transform-origin:x y; 注意后面的参数x和y用空格隔开 x y默认转换的中心点是元素的中心点（50% 50%） 还可以给x y 设置像素 或则 方位名词（top bottom left right center） 利用旋转做出如下内容： 思路：一个
阅读全文
摘要：transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换（transform） 移动：transform 旋转：rotate 缩放：scale 2D转换是改变标签在二位平面上的位置和形状的一种技术 2D转换之移动 translate 2D移动是2D转换里面的一种功
阅读全文
摘要：audio标签 无论访问者使用什么浏览器，它都将自动选择所读取的第一个文件类型，并为您播放声音。 视频如下： HTML5新增input表单如下： H5新增表单属性
阅读全文
