【移动端网页布局】移动端网页布局基础概念 ⑪ ( 移动端布局方式
一、移动端常见布局移动端网页的宽度 就是 屏幕宽度 , 不需要设置版心宽度 , 但是 页面必须进行尺寸适配 , 这就引入了如下几种页面布局方式 :
单独制作移动端页面 : 使用 流式布局 , 又称为百分比布局 ;使用 Flex 弹性布局 ;使用 Less + Rem + 媒体查询布局 ;混合布局 : 多种布局方式一起使用 ;制作兼容的响应式页面 : 使用 媒体查询 布局 ;使用 Bootstrap 布局 ;二、Webkit CSS样式初始化1、引入 normalize.css 样式文件在上一篇 【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css ) 博客中 , 介绍了 webkit 浏览器的页面初始化样式文件 , 在
标签中 , 引入该样式 ;代码语言：javascript复制
2、取消链接点击时的高亮效果 链接在手机网页中 , 点击会有高亮效果 , 一般情况下药取消该效果 ;
代码语言：javascript复制 a {
/* 取消链接点击时的高亮效果 */
-webkit-tap-highlight-color: transparent;
}3、禁用长按弹出菜单在手机端 , 长按 图片标签 / 链接标签 会弹出菜单 , 该样式也需要禁用 ;
代码语言：javascript复制 img,
a {
/* 禁用 长按弹出菜单 */
-webkit-touch-callout: none;
}4、取消按钮的自定义样式在 iOS 手机中 , 按钮会有自定义的高亮样式 , 按钮样式一般都是自己设计的 , 不使用默认样式 ;
代码语言：javascript复制 input {
/* 设置 iOS 取消按钮的自定义样式 */
-webkit-appearance: none;
}5、完整代码示例代码语言：javascript复制
