文章目录
一、移动端常见布局二、Webkit CSS样式初始化1、引入 normalize.css 样式文件2、取消链接点击时的高亮效果3、禁用长按弹出菜单4、取消按钮的自定义样式5、完整代码示例一、移动端常见布局
移动端网页的宽度 就是 屏幕宽度 , 不需要设置版心宽度 , 但是 页面必须进行尺寸适配 , 这就引入了如下几种页面布局方式 :
单独制作移动端页面 :使用 流式布局 , 又称为百分比布局 ;使用 Flex 弹性布局 ;使用 Less + Rem + 媒体查询布局 ;混合布局 : 多种布局方式一起使用 ;制作兼容的响应式页面 :使用 媒体查询 布局 ;使用 Bootstrap 布局 ;
二、Webkit CSS样式初始化
1、引入 normalize.css 样式文件
在上一篇 【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css ) 博客中 , 介绍了 webkit 浏览器的页面初始化样式文件 , 在<head>标签中 , 引入该样式 ;
<head><link rel="stylesheet" href="css/normalize.css" type="text/css"></head>
2、取消链接点击时的高亮效果
<a>链接在手机网页中 , 点击会有高亮效果 , 一般情况下药取消该效果 ;
a {/* 取消链接点击时的高亮效果 */-webkit-tap-highlight-color: transparent;}
3、禁用长按弹出菜单
在手机端 , 长按 图片标签 / 链接标签 会弹出菜单 , 该样式也需要禁用 ;
img,a {/* 禁用 长按弹出菜单 */-webkit-touch-callout: none;}
4、取消按钮的自定义样式
在 iOS 手机中 , 按钮会有自定义的高亮样式 , 按钮样式一般都是自己设计的 , 不使用默认样式 ;
input {/* 设置 iOS 取消按钮的自定义样式 */-webkit-appearance: none;}
5、完整代码示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webkit 初始化</title><link rel="stylesheet" href="css/normalize.css" type="text/css"><style>a {/* 取消链接点击时的高亮效果 */-webkit-tap-highlight-color: transparent;}img,a {/* 禁用 长按弹出菜单 */-webkit-touch-callout: none;}input {/* 设置 iOS 取消按钮的自定义样式 */-webkit-appearance: none;}div {/* 设置 CSS3 盒子模型样式 */box-sizing: border-box;}</style></head><body></body></html>
【移动端网页布局】移动端网页布局基础概念 ⑪ ( 移动端布局方式 | 流式布局 | 弹性布局 | 媒体查询布局 | Webkit 样式初始化 | 引入初始化样式文件 | CSS 特殊样式处理 )
