-
1像素边框查看全部
-
设计移动Web。 应该不止这两种方法， 还有字体、图片等各种细节， 需要深入学习查看全部
-
Tap 透传 解决方案： 1.使用缓动动画，过度 300ms 的延迟； 2.中间层 dom 元素（透明的dom节点）的加入，让中间层接收这个‘穿透’事件，稍后隐藏 3.上下都使用 tap 事件，原理上解决 tap 透传 （但不可避免原声标签的 click 事件的触发） 4.改用 Fastclick 的库（）查看全部
-
visual viewport：度量/视口viewport宽高 visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分，或者通过缩放来改变visual viewport的大小。 //无法改变，通过缩放scale控制 layout viewport: 布局viewport 如图，ios的默认layout viewport为980px //可以理解为就是body的宽度，在此之上渲染页面 //不用默认980px的layout viewport原因： //不同设备默认值不同，宽度不可控 //页面先在layout viewport全屏渲染css,再通过缩放由visual viewport展示，交互差 //缩放后连接不可点，又有滚动 //font-size:40px=PC的12px,不规范，字体设置是另外一门学问了。查看全部
-
Viewport 手机浏览器默认为我们做了两件事情 1.页面渲染在一个980px(ios)的虚拟viewport（为了排版正确） //这就是网页在手机上，会全屏显示的原因 2.缩放（排版正确后，再缩放到手机屏幕大小）查看全部
-
自定义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);查看全部
-
单行&多行文本溢出解决方案： -webkit-box-orient:vertical -> 垂直方向 -webkit-line-clamp: 2 -> 限定为2行 配合上面的属性。查看全部
-
字体不应该设置rem，因为随着浏览器(html)的大小而改变字体大小是不好的。 想想手机的字体比例->电脑的字体比例就知道了= =变得贼大查看全部
-
为了解决rem在进行单位换算上的麻烦问题，给大家介绍个使用rem的小方法，设置html字体大小为font-size:62.5%;然后使用rem的时候就更好用了，比如1.2rem=12px,1.4rem=14px,1.6rem=16px.查看全部
-
一像素边框解决方案查看全部
-
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 按照子项目自己的高度换行,显得比较挤;查看全部
-
ios默认 布局viewport =980,document.body.clientWidth查看, width：用来改变布局viewport, width=device-width：使布局viewport =设备宽度 度量viewport：由window.innerWidth查看 initial-scale=1:缩放比,控制window.innerWidth/document.body.clientWidth=1。自带width=device-width 最佳设置： 布局viewport = 设备宽度 = 度量viewport user-scalable=no:不可缩放查看全部
-
Flexbox一些常用属性查看全部
-
flexbox 不定宽高水平垂直居中查看全部
-
123查看全部
举报
0/150
提交
取消