做竞价网站用什么系统好,权威的建筑工程网站,韩国seocaso,同城58找房子租房信息随着移动互联网的日益普遍#xff0c;现在移动版本的web应用也应用而生#xff0c;那么在做移动web页面布局的过程中#xff0c;应该注意哪些要点呢#xff1f;现把个人的一些学习经验总结如下#xff1a;
要点一、piexl 1px 2dp dp dpr dpi ppi
要点二、viewport io… 随着移动互联网的日益普遍现在移动版本的web应用也应用而生那么在做移动web页面布局的过程中应该注意哪些要点呢现把个人的一些学习经验总结如下
要点一、piexl 1px 2dp dp dpr dpi ppi
要点二、viewport ios的viewport为980px 布局layout viewport 视图visual viewport meta标签语法 meta nameviewport contentnamevalue, namevalue width: 设置布局viewport的特定值“device-width” initial-scale: 设置页面的初始缩放 “1” minimum-scale: 最少缩放 maximum-scale: 最大缩放 user-scalable: 用户能否缩放“no” meta nameviewport contentwidthdevice-width, initial-scale1, user-scalableno
要点三、Flexbox弹性盒子布局
如何使用flexbox布局
display: -webkit-flex: 标识使用弹性布局
flex: num 占容器的比例
日常编程中常遇到的案例:
不定宽高的水平垂直居中
传统布局 position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);
flexbox justify-content: center; align-items: center; display: -webkit-flex;
flexbox的兼容性
IOS 可以使用最新的flex布局
android4.4以下, 只能兼容旧版的flexbox布局
android4.4及以上可以使用最新的flex布局
要点四、响应式布局 媒体查询 百分比布局 弹性图片max-width: 100% 重新布局显示与隐藏
要点五、移动web特别样式处理 高清图片的处理方案在移动web页面上渲染图片为了避免图片产生模糊图片的宽高应该用物理像素单位渲染即是100*100的图片应该使用100dp*100dp。 width: (w_value/dpr) px; height: (h_value/dpr) px; 一像素边框根本原因1px使用2dp渲染 实现方案使用元素伪类的方法以li元素为例 li.before {position: absolute;top: -1px;left: 0;content: ;width: 100%;height: 1px; border-top: 1px solid #ddd;-webkit-transform: scaleY(0.5);} 相对单位remem: 是根据父节点的font-size为相对单位但是在多层嵌套下变得非常难以维护 rem: 是根据html的font-size为相对单位和em相比rem更能作为全局统一设置的度量单位 rem screen.width / 20 比如
// 默认320px
html {font-size: 32px;}// iphone6
media (min-device-width: 375px) {html {font-size: 37.5px;}
}// iphone6 plus
media (min-device-width: 414px) {htmlfont-size: 41.4px;}
} 不使用rem的情况: font-size 文本溢出
// 单行文本溢出
.inaline {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}// 多行文本溢出
.intwoline {display: -webkit-box !important;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}
要点六、Tap基础事件 要点七、Touch基本事件 要点八、弹性滚动 持续更新中......
