移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局

最新推荐文章于 2024-05-08 11:06:58 发布

芋泥丶

最新推荐文章于 2024-05-08 11:06:58 发布

阅读量1.2k

点赞数 9

分类专栏：移动web网页开发前端文章标签： css3 前端 html5 动画

本文链接：https://blog.csdn.net/m0_53619602/article/details/125199744

版权

一、移动端基础

1.概念

2.viewport 视口

布局视口（layout viewport）

视觉视口（visual viewport）

前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。

单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。

一、移动端基础

在学习布局之前我们需要了解一些移动端布局需要注意的事项

1.概念

移动端浏览器我们主要对webkit内核进行兼容，现在大部分移动端浏览器时基于webkit内核，所以基本不用怎么考虑兼容性问题，可以放心使用html5和css3代码

我们现在开发的移动端主要针对手机端开发，移动端碎片化比较严重，分辨率和屏幕尺寸大小不一，我们可以用谷歌浏览器模拟手机界面以及调试（按F12键点击这个按钮即可）

2.viewport 视口

视口就是浏览器显示页面内容的屏幕区域，可以分为：布局视口（layout viewport），视觉视口（visual viewport），视觉视口（visual viewport）

布局视口（layout viewport）

一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个视口分辨率设置为980px ,所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小, 一般默认可以通过手动缩放网页。

视觉视口（visual viewport）

字面意思,它是用户正在看到的网站的区域（注意:是网站的区域）。我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度

理想视口（ideal viewport）

理想视口是为了使网站在移动端有最理想的浏览和阅读宽度而设定，对设备来讲,是最理想的视口尺寸，但是需要手动添写meta视口标签通知浏览器操作

meta视口标签

主要目的:布局视口的宽度应该与理想视口的宽度一致。简单理解就是设备有多宽,我们布局的视口就多宽

<meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

width 宽度设置的是viewport宽度，可以设置device-width特殊值

   initial-scale 初始缩放比,大于0的数字

   maximum-scale 最大缩放比,大于0的数字

   minimum-scale 最小缩放比,大于0的数字

   user-scalable 用户是否可以缩放, yes或no ( 1或0)

标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
最大允许的缩放比例1.0
最小允许的缩放比例1.0
不允许用户自行缩放

2.二倍图

为什么使用二倍图呢，要明白物理像素和物理像素比

物理像素点：指的是屏幕显示的最小颗粒。例如：pc端页面，1px等于一个物理像素点
物理像素比或者屏幕像素比 ：是指一个px能够显示的物理像素点的个数

因为移动端使用了一种 Retina (视网膜屏幕)显示技术可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率,并提高屏幕显示的细腻程度。所以我们放在pc端的一张图片，在移动端页面显示是会被放大两倍或者三倍，这就是为什么要使用二倍图或者三倍图。

二倍图的使用

准备一个比我们实际需要大小大2倍的图片的方式就是二倍图

使用时缩小一倍使用，那么显示在移动端的时候图片放大到原来的尺寸，图片就不会失真。

/*在iphone8下面*/
img{
/*原始图片100* 100px*/
width: 50px;
height: 50px;
}
.box{
/*原始图片100* 100px*/
background-size: 50px 50px;
}

二倍精灵图的做法也一样，使用时需要缩小一半在使用。

精灵图总体大小为208*655

部分css代码，使用时需要将图片大小调一半：background-size: 104px auto;

    background: url(../images/sprite.png) -59px -279px;
    background-size: 104px auto;

3.移动端技术解决方案

移动端只需要考虑webkit兼容性问题放心使用h5标签和css3样式

CSS初始化

移动端初始化使用normalize.css，可以从网上直接下载使用

官网地址：http://necolas.github.io/normalize.css/

Normalize.css :保护了有价值的默认值
Normalize.css :修复了浏览器的bug
Normalize.css :是模块化的
Normalize.css :拥有详细的文档

CSS3盒子模型

css3盒子模型很好的解决了添加内边距和边框会改变盒子大小的这个问题，在移动端使用也不需要考虑兼容性。

box-sizing：border-box；盒子大小为width
box-sizing：content-box；盒子大小为width + padding + border ( 以前默认的)

特殊样式

点击高亮我们需要清除，设置为transparent 完全透明

-webkit- tap-highlight - color: transparent;

在移动端浏览器默认的外观加上这个属性才能给按钮和输入框自定义样式

-webkit- appearance: none;

禁用长按页面时的弹出菜单

img,a { - webkit- touch- callout: none; }

以上这些是需要我们手动写在css文件中的。

二、流式布局（百分比布局）

流式布局（百分比布局）也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。

在开发时通常会规定最大宽度和最小宽度

max-width最大宽度( max-height最大高度)
min-width最小宽度( min-height最小高度)

接下来用一个案例来熟悉流式布局（百分比布局）

首先在我们index.html中头部，我们要规定meta视口标签

<meta name="viewport"
content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

然后引用我们的初始化css文件。

<link rel="stylesheet" href="css/normalize.css">

html部分代码：

<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,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

在css文件中我们设置设置宽度只用百分比的形式，记得要规定最大宽度和最小宽度，以及一些初始化代码。

width: 100%;
min-width: 320px;
max-width: 640px;

css部分代码：

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    font-family: -apple-system, Helvetica, sans-serif;
}

* {
    /* 点击高亮我们需要清除，设置为transparent 完全透明 */
    -webkit-tap-highlight-color: transparent;
}

input {
    /* 在移动端浏览器默认的外观加上这个属性才能给按钮和输入框自定义样式 */
    -webkit-appearance: none;
}

/* 禁用长按页面时的弹出菜单  */
img,
a {
    -webkit-touch-callout: none;
}

头部制作：

头部html代码:

<!-- 头部 -->
    <header clas

最低0.47元/天解锁文章

芋泥丶

关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
7
评论
移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局

前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。...
复制链接

扫一扫