移动端布局学习之流式布局1

1.移动端基础

1.1 浏览器现状

国内的UC和QQ 百度等手机浏览器都是根据Webkit修改过来的内核，国内目前尚无自主研发的内核，就像国内的手机系统基本上都是局域安卓修改开发的一样.

意思就是:兼容移动端主流浏览器处理Webkit内核浏览器即可。

1.2 手机屏幕的现状

移动端设备屏幕尺寸非常多，碎片化严重

Android设备有多种分辨率480*480 480*854 540*960 720*1280 等等

近年来iPhone的碎片化也严重了其设备的主要分辨率有 640*960 640*1136 750*1334 1242*2208等等

作为开发者无需关注这些分辨率因为我们常用的尺寸单位是px

1.3 移动端调试方法

Chrome DevTools(谷歌浏览器)的模拟手机调试

搭建本地web服务，手机和服务器一个局域网内通过手机访问服务器

使用外网服务器直接IP或者域名访问

总之:

移动端浏览器我们主要对Webkit内核进行兼容

我们现在开发的移动端主要针对手机端开发

现在移动端碎片化比较严重，分辨率和尺寸大小不一

2 视口

视口(viewport)就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口视觉视口和理想视口.

2.1 布局视口layout viewport

一般移动设备的浏览器都默认失职了一个布局视口用于解决早期的PC端页面的手机上显示的问题

iOS Android 基本都将这个视口分辨率设置为980px 所以PC上的网页能在大多数手机上呈现只不过看上去元素很小一般默认可以通过手动缩放网页.

2.2 视觉视口visual viewport

用户正在看到的网站的区域注意:是网站的区域

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍然保持原来的宽度

2.3 理想视口 ideal viewport

为了使网站在移动端有理想的浏览和阅读宽度而设定

理想视口对设备来讲是最理想的视口尺寸

需要手动添加meta视口标签通知浏览器操作

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

2.4 meta视口标签

视口标签语法

    <!-- content 属性 -->
    <!-- width：宽度设置的是viewport宽度 可以设置device-width特殊值 -->
    <!-- initial-scale 视图缩放比 大于0的数字 初始的缩放倍数-->
    <!-- maximum-scale 最大缩放比 大于0的数字 -->
    <!-- minimum-scale 最小缩放比 大于0的数字 -->
    <!-- user-scalable 用户是否可以缩放 yes或no（1或0） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

标准的viewport设置:

视口宽度和设备保持一致

视口的默认缩放比是1.0

不允许用户自行缩放

最大允许的缩放比例1.0

最小允许的缩放比例1.0

倍图

物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了。比如苹果6，7，8 是750*1334

我们开发时候的1px不是一定等于1个物理像素。

PC端页面，1px等于1个物理像素的。

一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

物理像素就是我们说的分辨率。物理像素比比如iPhone8 一个px能显示两个物理像素，所以物理像素比是2

PC端和早期的手机屏幕 1CSS像素 = 1物理像素

Retina(视网膜屏幕)是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里。从而达到更高的分辨率，并提高屏幕显示的细腻程度。

这个时候，对于一张50px*50px的图片，在手机Retina屏中打开，按照上面的分析是要被放大到2倍或者多倍的会造成图片模糊。

所以在标准的viewport中，会使用多倍图来提高图片质量。解决在高清设备中的牧户问题。

通常使用二倍图。因为iPhone8plus 及以上机型的影响还会使用3倍图或者四倍图。背景图片要注意缩放问题。

如果在iPhone8显示50*50图片，我们要准备一张100*100的图片再手动改成50*50 的来使用，这就是二倍图。

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>流式布局倍图</title>
    <style>
        /* 我们需要一个50*50(CSS像素)的图片 直接放到我们的iPhone8里面会放大2倍 100*100*/
        /* 我们采取的是放一个100*100的图片 然后手动把图片缩小为50*50(CSS像素) */
        /* 放到iPhone8 中 会放大二倍 但是图片本身就是100*100的 所以不会模糊 */
        /* 在iPhone8中我们准备的图片 会比我们实际需要的大小的2倍 这就是二倍图 */
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 放到手机里会模糊 -->
    <img src="../img/apple50(1).jpg" alt="">
    <!-- 这个不会 -->
    <img src="../img/apple100.jpg" alt="">
</body>

</html>

背景图片缩放：

background-size 属性规定背景图像的尺寸

background-size(宽度高度)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            background: url(../img/dog.jpg) no-repeat;
            /* 如果只写一个参数 高度和宽度一样 */
            /* background-size: 500px; */
            /* 里面的单位可以跟%  相对于父盒子说的*/
            /* background-size: 50%; */
            /* 特殊字符 cover 完全覆盖*/
            /* background-size: cover; */
            /* 把图像扩展至最大尺寸 使宽度和高度完全适应内容区域 当宽度或者高度铺满盒子 就不在进行拉伸
            可能有部分空白区域 等比例缩放 */
            background-size: contain;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

背景图片处理:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们有一个50*50的盒子需要一个背景图片 但是根据分析这个图片要准备倍图 */
        /* 通过background-size 缩放成50*50的 */
        div {
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            background: url(../img/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

二倍精灵图的处理方法

1. 在firework里面把精灵图等比例缩放为原来的一半

2. 之后根据大小测量坐标

3. 注意代码里面background-size也要写:精灵图原来宽度的一半

移动端开发选择

移动端主流方案:

1.单独制作移动端页面

通常情况下网址域名前加m(mobile)可以打开移动端通过判断设备，如果是移动设备打开就跳转到移动端界面

2.响应式页面兼容手机页面

三星官网是这样的通过判断屏幕的宽度来改变样式以适应不同终端缺点是制作麻烦需要很大精力去调试兼容性问题。

移动端技术解决方案

移动端浏览器基本以Webkit内核为主，因此我们就考虑Webkit兼容性问题

我们可以放心的使用H5标签和CSS3样式

同时我们浏览器的私有前缀我们只需要考虑添加Webkit即可.

移动端CSS初始化推荐使用 normalize.css

优点:

1.normalize.css 保护了有价值的默认值

2.normalize.css 修复了浏览器的bug

3.normalize.css 是模块化的

normalize.css 文档地址:http://necolas.github.io/normalize.css/

CSS3中的盒子模型

传统模式宽度计算:盒子的宽度=CSS中设置的width+border+padding

CSS3盒子模型：盒子的宽度=CSS中设置的宽度width里面包含了border和padding

也就是说我们的CSS3中的盒子模型，padding和border不会撑大盒子。

/* CSS3 盒子模型 */
/* box-sizing: border-box; */
/* 传统盒子模型 */
/* box-sizing:content-box */

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3中的盒子模型</title>
    <style>
        div:nth-child(1) {
            /* 传统盒子模型=width + border + padding  */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid #ccc;
        }

        div:nth-child(2) {
            /* 有了这句话就让盒子变成CSS3盒子模型 */
            /* padding 和 border 不会再撑大盒子了 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid pink;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

移动端可以全部使用CSS3盒子模型

PC端如果完全需要兼容我们就用传统模式如果不考虑兼容性我们就选择CSS3盒子模型。

移动端技术解决方案

特殊样式:

/* CSS3 盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除 设置为transparent 完成透明 */
-webkit-tap-highlight-color: transparent;
/* 移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */
img,a {
　　-webkit-touch-callout: none;
}

移动端常见布局

移动端技术选型

移动端布局和以前我们学习的PC端有所区别:

1.单独制作移动端页面(主流)

>1. 流式布局(百分比布局)

>2.flex弹性布局(强烈推荐)

>3.less + rem + 媒体查询布局

>4.混合布局

2.响应式页面兼容移动端(其次)

>1.媒体查询

>2.bootstarp

流式布局(百分比布局)

流式布局，就是百分比布局也称非固定像素布局

通过盒子的宽度设置成百分根据屏幕的宽度来进行伸缩，不受固定像素的限制内容向两侧填充

流式布局方式是移动Web开发使用的比较常见的布局方式。

例子:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            width: 100%;
            /* 最大宽度 超过980px 就不能再放大了 */
            max-width: 980px;
            /* 最小宽度 小于320px 就不能再缩小了 */
            min-width: 320px;
            margin: 0 auto;
            margin-top: 20px;
            background-color: orange;
        }

        section div {
            float: left;
            width: 49%;
            height: 100px;
        }

        section div:nth-child(1) {
            background-color: pink;
        }

        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

流式布局京东移动首页(部分):

方案:我们采取单独制作移动页面方案

技术:布局采取流式布局

<body>
    <header class="app">
        <ul>
            <li><img src="../images/close.png" alt=""></li>
            <li><img src="../images/logo.png" alt=""></li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
            <input type="text" placeholder="请输入商品内容">
        </div>
        <div class="search-login">
            登录
        </div>
    </div>
    <!-- 主题内容部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="../upload/banner.dpg" alt="">
        </div>
        <!-- 品牌日 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="../upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="../upload/pic22.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="../upload/pic33.dpg" alt="">
                </a>
            </div>
        </div>
        <!-- 导航栏 -->
        <nav>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
        </nav>
        <!-- 新闻模块 -->
        <div class="news">
            <a href="#">
                <img src="../upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="../upload/new2.dpg" alt="">
            </a>
            <a href="#">
                <img src="../upload/new3.dpg" alt="">
            </a>
        </div>
    </div>
</body>

</html>

CSS部分:

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    background: #ccc;
    font-size: 14px;
    font-family: ‘-apple-system‘, ‘Helvetica‘,‘sans-serif‘;
    line-height: 1.5;
}
img {
    /* 去除图片底部的空白缝隙 */
    vertical-align: middle;
}

/* 移动端处理的特殊样式 */
* {
    /* 取消点击高亮显示 */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
}

img,
a {
    /* 取消长按提示 */
    -webkit-touch-callout: none;
}

a {
    color: #666;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app {
    height: 45px;
}
.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #333;
    color: #fff;
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(1) img {
    width: 10px;
}

.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #f63535;
}

/* 搜索 */
.search-wrap {
    position: fixed;
    height: 44px;
    overflow: hidden;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
}
.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}

.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size:20px 18px;
    margin-top: 14px;
    margin-left: 15px;
}

.search-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    line-height: 44px;
}

.search {
    position: relative;
    height: 30px;
    background-color: #fff;
    margin: 0 50px;
    margin-top: 7px;
    border-radius: 15px;
}

.jd-icon {
    position: absolute;
    top: 8px;
    left: 13px;
    width: 20px;
    height: 15px;
    background-color: pink;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}
.jd-icon::after {
    position: absolute;
    top: 0px;
    right: -8px;
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
}
.sou {
    position: absolute;
    top: 9px;
    left: 50px;
    width: 18px;
    height: 15px;
    background-color: pink;
    /* 二倍精灵图的做法 */
    /* 1. 在firework里面把精灵图等比例缩放为原来的一半 */
    /* 2. 之后根据大小测量坐标 */
    /* 3. 注意代码里面background-size也要写:精灵图原来宽度的一半*/
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}

.search input {
    position: absolute;
    top: 7px;
    left: 80px;
    border: none;
}

.slider img {
    width: 100%;
}
.brand {
    border-radius:10px 10px 0 0;
    overflow: hidden;
}
.brand div {
    float: left;
    width: 33.333333%;
}
.brand div img {
    width: 100%;
}

nav a {
    float: left;
    width: 20%;
    text-align: center;
}

nav a img {
    width: 40px;
    margin: 12px 0 8px 0;
}
nav a span {
    display: block;
}

/* 新闻模块 */
.news a {
    float: left;
    box-sizing: border-box;
}
.news a:nth-child(1) {
    width: 50%;

}
.news a:nth-child(n + 2) {
    width: 25%;
    border-left: 1px solid #e8e8e8;
}
.news a img {
    width: 100%;
}

原文地址：https://www.cnblogs.com/huanying2000/p/12236974.html

时间： 2024-11-05 20:44:01

移动端布局学习之流式布局1的相关文章

(html+css)_移动端适配方案一（流式布局）

一.前言二.主要内容 1.移动端面对的问题:因为手机屏幕和尺寸不一样,当我们用不同手机设备浏览的时候为了提高用户体验必须要做移动端适配 2.解决方案一: 流式布局 + viewport视口进行设置流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. 2.设计方法 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查

流式布局&固定宽度&响应式&rem

我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: 例如流式布局的解决方案有不少弊端,它虽然可以让各种屏幕都适配,但是显示的效果极其的不好,因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果. 他们在页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但

关于静态布局、自适应布局、流式布局、响应式布局、弹性布局的一些概念

一.静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端.2.设计方法: PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅

页面布局的几种方式（静态化布局，流式布局，自适应布局，响应式布局，弹性布局）

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. https://developers.google.com/search/mobile-sites/mobile-seo/respon

瀑布流式布局

今天终于搞懂了瀑布流式布局,哈哈,总结下瀑布流式布局分为两种类型:1.每一列都限定宽度不限定高度的布局(使用浮动)2.宽度不是写死的,是根据页面的放大缩小变化的(定位布局) 瀑布流式布局的重点是:每个新加载的模块都应该显示在原有模块高度最小的下方注意事项: 图片:接收到的数据在插入到文档的过程中,可能会因为图片的加载速度影响Li的最小高度,可以等图片加载完触发某个事件,再继续加载图片(还未研究出):可以设置图片的相对宽高; 什么时候鼠标滚动的时候继续加载数据:当最小高度的模块显示在文档可视区

Android流式布局实现

查看我的全部开源项目[开源实验室] 欢迎加入我的QQ群:[201055521],本博客客户端下载[请点击] 摘要新项目用到了一种全新布局----Android标签流式布局的功能,正好一直说给大家讲自定义控件的实现,今天就为大家讲一种android流式布局的实现. 本文原创,转载请注明地址:http://blog.kymjs.com/ 正文在日常的app使用中,我们会在android 的app中看见热门标签等自动换行的流式布局,今天,我们就来看看如何自定义一个类似热门标签那样的流式布局吧(源码

CSS3与页面布局学习总结——多种页面布局

一.负边距与浮动布局 1.1.负边距所谓负边距就是margin取负值的情况,如margin:-40px:margin-left:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见用法如下: 1.1.1.向上移动当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: 示例代码: <!DOCTYPE html> <html> <he

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

近期学习,有很多感想,有时候看似相近的概念,其实意义却不相同.所以学习要针对不同的名词有明确的区分意识. 抽空时间,打算学习下display:flex;本以为就是一个小小的知识点,正式去研究的时候,才发现display:flex;有很多内容,能实现很多效果.比如三栏布局(左右两栏固定,中间栏自适应),圣杯布局. 后来想着经常听到流式布局,自适应布局,响应式布局,他们有什么区别呢,就去搜了许多内容查看,才发现每种布局都有优缺点和不同使用场景. 静态布局:给页面元素设置固定的宽度和高度,单位用px,