【移动端网页布局】移动端网页布局基础概念 ⑪ ( 移动端布局方式 | 流式布局 | 弹性布局 | 媒体查询布局 | Webkit 样式初始化 | 引入初始化样式文件 | CSS 特殊样式处理 )

韩曙亮

发布于 2023-04-30 08:13:16

94100

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、移动端常见布局

移动端网页的宽度就是屏幕宽度 , 不需要设置版心宽度 , 但是页面必须进行尺寸适配 , 这就引入了如下几种页面布局方式 :

单独制作移动端页面 :
- 使用流式布局 , 又称为百分比布局 ;
- 使用 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>