-
弹性局部滚动查看全部
-
弹性滚动查看全部
-
自定义Tap事件原理： 在touchstart时记录时间、手指位置,在touchhend时进行比较,如果手指位置没有移动(或位移非常小)且时间间隔较短(一般200ms),且过程中未曾触发过touchmove,即可认为触发了手持设备上的'click',一般称它为'tap'; ※ 移动端click事件有300 ms延迟,一般使用Tap自定义事件代替click事件; - 移动端click事件有300 ms延迟,是判断用户触摸是双击放大页面或手指不离开屏幕移动,因此click事件的回调函数要延迟300 ms执行; Tap"点透"的bug - 点透事件是当下层是click事件,上层是Tap事件,当点击上层时,上层马上就消失了,然后过了300ms,click事件才会响应,所以就会出发click事件; Tap透传的解决方案： 1. 使用缓动动画,过渡300ms的延迟; 2. 中间层dom元素的加入,让中间层接受'穿透'事件,稍后隐藏; 3. '上下'都使用Tap事件(但不可避免原生标签的click事件); 4. 改用Fastclick的库(最新的zepto已经fixed掉这个bug);查看全部
-
高清图片用物理像素单位渲染,即dp; 移动web页面上渲染图片,为了避免图片模糊,图片的匡高应该用物理像素渲染,即100*100px的图片,用50*50dp; width = (width_value/dpr)px; height = (height_value/dpr)px; 1像素边框失真方案 : 加伪类通过缩放解决1像素边框问题; li:before{ position:absolute; top:-1px; left:0; content:''; width:100%; height:1px; border-top:1px solid #ccc; -webkit-transform:scaleY(0.5); //竖向缩放成0.5,实现1dp = 0.5px; } 相对单位rem rem 基值 : rem = screen.width/20; em -> 根据父节点的font-size为相对单位; rem -> 根据html的font-size为相对单位(更加能作为全局统一设置的度量); ※ font-size不使用rem 多行文本溢出 orient：设置方向为垂直; //单行文本溢出 .div{ overflow: hidden; //溢出隐藏 white-space: nowrap; //文本不换行 text-overflow: ellipsis; //文本溢出包含元素时,显示省略符号来代表溢出文本 } //多行文本溢出 .div{ display:-webkit-box !important; //旧版的 flex 布局 overflow:hidden; text-overflow:ellipsis; word-break:break-all; //自动换行 -webkit-box-orient:vertical; //从上向下垂直排列子元素 -webkit-line-clamp:2; //设置显示几行; }查看全部
-
响应式设计 - 百分比布局; - 弹性图片 [也是百分比]; max-width: 100%; - 重新布局,显示与隐藏; 媒体查询： /*额外为1024px范围做了些调节*/ @media screen and (max-width:1024px) { 样式... } /*平板的宽度*/ @media screen and (max-width:980px){ 弹性图片max-width:100%;height:auto;根据不同终端的需要在@media screen下设置百分数; ... } @media screen and (max-width: 720px/640px/320px){ 样式... } 媒体类型： screen -> 屏幕; print -> 打印机; handheld -> 手持设备; all -> 通用; 媒体查询参数： width -> 视口的宽高; height -> 视口的高高; device-width -> 设备的宽度; device-height -> 设备的高度; orientation -> 检查设备处于横向(landscape)还是竖向(portrait); ※ 当一个元素经常要切换位置的时候,把它设置为绝对定位,减少重绘提高渲染性能;查看全部
-
<meta name="viewport" content="width=device-width"查看全部
-
align-self : 子元素自己设置对齐方式; 值： flex-start -> 顶层; flex-end -> 底层; center -> 居中; auto/*default*/ -> 同拉伸; baseline -> 文字基线; stretch -> 拉伸; justify-content : 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式; align-content : 属性对齐交叉轴上的各项(垂直)方向上的对齐方式; 值： flex-start -> 左对齐; flex-end -> 右对齐; center -> 居中; space-between -> 两侧对齐; space-around -> 间距平分; flex-warp : 当子元素宽度大于父元素宽度时是否换行; 值： nowarp/default -> 默认当子元素宽度大于父元素宽度时不换行; warp -> 换行; warp-reverse -> 换行倒序; flex-direction : 规定灵活项目的方向; 值： row/defaultr -> 默认值,灵活的项目将水平显示,表示一行显示; row-reverse -> 与 row 相同,一行显示,顺序相反; column -> 灵活的项目将垂直显示,表示竖列显示; column-reverse -> 与 column 相同,竖列显示,顺序相反; initial -> 设置该属性为它的默认值; inherit -> 从父元素继承该属性,纵向倒序; align-items : 在父元素统一设置子元素; align-items 整个容器分两行; align-content 按照子项目自己的高度换行,显得比较挤;查看全部
-
px与dp换算查看全部
-
web移动像素只是查看全部
-
nav{display:-webkit-flex;} .item{flex:1;}查看全部
-
不定宽高的垂直水平居中查看全部
-
iphone分辨率640*1136.查看全部
-
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">查看全部
-
1px = (dpr)*(dpr)*db查看全部
-
flexbox版 不定宽高的水平垂直居中 justify-content:center; //子元素水平居中 align-items:center;//子元素垂直居中 display:-webkit-flex;查看全部
举报
0/150
提交
取消