移动web开发笔记1:移动端基础、常见移动端屏幕尺寸、布局视口、视觉视口、理想视口、meta标签、二倍图、物理像素、物理像素比、背景缩放、css3盒子模型、特殊样式、常见布局、流式布局、京东案例

最新推荐文章于 2022-04-28 11:38:07 发布
最新推荐文章于 2022-04-28 11:38:07 发布
阅读量953 收藏 6
点赞数 1
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42129553/article/details/113811796
版权
本文详细介绍了移动Web开发中的流式布局、视口概念及其应用，包括布局视口、视觉视口和理想视口的差异，以及如何通过meta标签设置理想视口。此外，还讲解了二倍图原理、物理像素比和背景缩放。最后，讨论了移动开发的主流方案，如单独制作移动端页面和响应式设计，并提到了CSS3的盒子模型、移动端特殊样式以及流式布局的实现。
摘要由CSDN通过智能技术生成

移动web开发流式布局

1.0 移动端基础

1.1浏览器现状

PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

1.2 手机屏幕的现状
  • 移动端设备屏幕尺寸非常多，碎片化严重。
  • Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。
  • 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
  • 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。
1.3常见移动端屏幕尺寸

在这里插入图片描述

1.4移动端调试方法
  • Chrome DevTools（谷歌浏览器）的模拟手机调试
  • 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
  • 使用外网服务器，直接IP或域名访问

2.0 视口（常用理想视口）

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口 layout viewport（显示内容会偏小）

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

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

在这里插入图片描述

2.2视觉视口 visual viewport（可以看到的区域）

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

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

2.3理想视口 ideal viewport（最重要的，meta视口标签）

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

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

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

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

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

2.4meta标签

在这里插入图片描述

最标准的视口标签

  • 视口宽度和设备保持一致

  • 视口的默认缩放比例1.0

  • 不允许用户自行缩放

  • 最大允许的缩放比例1.0

  • 最小允许的缩放比例1.0

    <!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"> -->
    <!-- 标准 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0">
    <title>Document</title>
</head>

<body>
    黑马程序员
</body>

</html>

3.0二倍图

3.1物理像素&物理像素比

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

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

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

物理像素(分辨率): 也就是一行能显示多少个物理像素 iphone8的物理像素是750，也就是一行能显示750个物理像素

**开发像素:**px,在pc端px=物理像素，移动端不尽相同，尺寸如下，在iphone8里，1px=2个物理像素

在这里插入图片描述

物理像素比:1px里等于几个物理像素，就是物理像素比，1px=2个物理像素，那么物理像素比就是2

代码:

<!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,maximum=1.0,minimum=1.0,user-scalable=0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 375px;
            height: 300px;
            background-color: pink;
        }
        /* 1、物理像素：分辨率 也就是一行能显示多少个物理像素
          iphone8的物理像素是750，也就是一行能显示750个物理像素
        2、开发像素px 不一定与物理像素相等，在pc端是相等的，在移动端不一定
        3、iphone8的物理像素是750，开发像素375px，就可以装下750个物理像素，
          也就是1px能装下2个物理像素，物理像素比就是一个px能装下的物理像素的个数，所以
          物理像素比是2 */
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放

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

对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

通常使用二倍图， 因为iPhone 6 的影响背景图片 注意缩放问题

<!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>Document</title>
    <style>
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 1、要求：显示一个50*50像素的背景图，在移动端显示，要清楚
2、普通方法:直接准备一个50px的图片，（缺点：50px是开发像素，如果放在移动端iphone8上
          的话，就会显示100个物理像素，图片会被放大，变得模糊）
3、解决方法：准备一个至少比原始图片尺寸大2倍的图片，如100*100像素，然后再改为50px的大小
          放在iphone8上的话，就会显示100个物理像素，而原本就是100个物理像素，比较清楚 -->

    <!-- 模糊的方法 -->
    <img src="images/apple50(1).jpg" alt="">
    <!-- 清楚的方法 -->
    <img src="images/apple100.jpg" alt="">
</body>

</html>

效果 在这里插入图片描述

3.2背景缩放background-size

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

background-size: 背景图片宽度 背景图片高度;

单位： 长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

<!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>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* 1、background-size:宽度 高度 */
            /* background-size: 400px 300px; */
            /* 2、background-size:宽度  等比例缩放 */
            /* background-size: 300px; */
            /* 3、background-size: 50%; 百分比 是相对于父盒子来说的 */
            /* background-size: 50%; */
            /* 4、background-size: cover; 等比例缩放 直接覆盖整个盒子  */
            /* background-size: cover; */
            /* 5、background-size: contain; 等比例缩放 当宽度和高度其中一个到底的时候，就停止 */
            background-size: contain;
        }
    </style>
</head>

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

</html>

背景图片实现二倍图

<!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>Document</title>
    <style>
        /* 1、实现一个50px的图片 那么我们需要准备一个100px的图片 */
        
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/apple100.jpg) no-repeat;
            /* 2、通过background-size进行修改尺寸; */
            background-size: 50px 50px;
        }
    </style>
</head>

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

</html>

4.0 移动开发选择和技术解决方案

4.1移动端主流方案

1.单独制作移动端页面（主流）

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

也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站

京东pc端：

在这里插入图片描述

京东移动端：

在这里插入图片描述

2.响应式页面兼容移动端（其次）

在这里插入图片描述

响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配

4.2 移动端技术解决方案

1.移动端浏览器兼容问题

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

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

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

2.移动端公共样式

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

Normalize.css：保护了有价值的默认值

Normalize.css：修复了浏览器的bug

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

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

4.3 移动端大量使用 CSS3盒子模型box-sizing

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

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

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

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


<!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>Document</title>
    <style>
        div:nth-child(1) {
            /* 传统的盒子模型:宽度=width+border+padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid;
            /* 传统 */
            box-sizing: content-box;
        }
        
        div:nth-child(2) {
            /* css3的盒子模型:宽度=width(包含了border+padding 不会撑大盒子) */
            /* css3 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid;
        }
    </style>
</head>

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

</html>

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

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

4.4移动端特殊样式
    /*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; }

5.0移动端常见布局

移动端单独制作

  • 流式布局（百分比布局）
  • flex 弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  • 混合布局

响应式

  • 媒体查询
  • bootstarp

流式布局：

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

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

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

流式布局: 在这里插入图片描述

<!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>Document</title>
    <style>
        /* 流式布局：百分比布局 可以设置最小和最大宽度 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            min-width: 320px;
            max-width: 980px;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: red;
        }
    </style>
</head>

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

</html>
京东首页

https://blog.csdn.net/qq_42129553/article/details/113811778

小黄呀呀呀
关注
专栏目录
移动端界面设计之尺寸篇
weixin_30407613的博客
03-15 2872
画布尺寸： 新建750×1334 分辨率72，像素/英寸。 常见的字体大小： 24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。 字体： 中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。 app所用的字体大礼包下载（虎哥整理的） ios开发里单位是pt 750×...
移动WEB开发之流式布局 移动端基础；视口设置；二倍图设置；css初始化文件；移动端特殊样式；流失布局方法
m0_55170432的博客
04-14 329
--------------------- 移动端基础 ------------------ 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理 Webkit 内核浏览器即可。 1.2 手机屏幕现状 移动端设备屏幕尺寸非常多，碎片化严重。 Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还
移动端尺寸基础知识
weixin_34354945的博客
04-08 369
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x...
移动端屏幕尺寸
weixin_39703839的博客
12-07 733
/*智能手机*/ @media screen and (max-width:480px) { footer img { width: 20%; } } /*竖屏平板*/ @media screen and (max-width:768px) and (min-width:480px) { footer img { width: 15%; } } /*横屏平板*/ @media sc...
html移动端物理像素,移动端（视口(meta)，像素比，常见屏幕尺寸）
weixin_42492000的博客
06-04 676
1. 视口：(布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport))meta 视口标签 width：宽度设置的是 viewport 宽度，可以设置 device-width(设备宽度)特殊值user-scalable：用户是否可以缩放，yes 或者 no(1 或者 0)initial-scale：初始缩放比，大于 0 的数...
移动端尺寸
淡淡的芦苇的博客
01-20 342
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位 一些只能vw, vh才能完成的应用场景： 场景之：元素的尺寸限制: vw vh 主要是实现了动态高度百分比布
视口viewport的理解（布局视口、视觉视口、理想视口）
m0_51636525的博客
04-28 5419
在一个浏览器中，看到的区域就是视口（viewport） 在PC端页面中，不需要对视口进行区分，因为布局视口和视觉视口是同一个
二、视口 布局视口 视觉视口 理想视口
快乐de馒头
12-30 2215
2视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 IOS,Android基本都是将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过网页上的元素看上去很小，一般默认可以通过手动缩放网页。 2.2 视觉视口 visual viewport 字面意思，它是用户正.
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
7. **Viewport Meta标签**：在移动设备上，`<meta name="viewport" content="...">`标签用来控制页面的视口大小，对于优化移动Web体验至关重要。 8. **JavaScript适配**：除了CSS，JavaScript也可以用于动态调整...
布局视口、视觉视口、理想视口
weixin_43269800的博客
03-10 1676
布局视口 在移动端，浏览器厂商面临着一个比较大的问题，他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的呈现在移动端设备上，并且不会出现滚动条。 这个时候，视口的宽度还是和浏览器窗口的宽度一致。我们都知道pc端的页面一般都为960px或者1024px。那么要完整的放下它们，我们移动端浏览器必须要有个容器放下它，而且只有有了这个容器我们才能规定移动端的浏览器到底能放下多大的页面。 这个容器我...
移动端尺寸全集
11-29
移动端设计尺寸，包括Android设计尺寸、ios设计chicun
移动端屏幕及图标尺寸图
06-10
这是一张详细的移动端界面尺寸和分辨率的统计图，包括：iPhone、iPad、Android、主流浏览器等，还有移动端APP图标尺寸，非常适合收藏。
物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口
qq_43358160的博客
12-23 629
1.1物理像素 手机屏幕横向有828个点 手机屏幕纵向上有1792个点 同等大小屏幕下，点越多、图像显示越精细 上面所说屏幕上一个个点就是物理像素（physical pixel） 物理像素也叫设备像素（dp:device pixel） 1.2逻辑像素 pt: html css中的使用的单位像素px: 实际上指的是逻辑像素pt px: photoshop测量中的但是实际上指的是物理像素, 物理像...
移动端设备尺寸
weixin_34319111的博客
11-02 305
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">minimal-ui，用于ios端 转载于:https://www.cnblogs.com/lvxisha/p/...
移动端设备常用尺寸笔记
小糖穿越火线
03-27 434
部分设备分辨率可查询：http://screensiz.es/
【移动端】手机界面的设计尺寸
smart_dream
03-05 7162
从设计方面来看，做手机界面设计的尺寸一般分为iPhone和Android两种设备。
移动端html尺寸,移动端页面的三种尺寸
weixin_39588206的博客
06-17 1586
对于移动端页面来说，所有尺寸都应该明确的归为三类：逻辑像素尺寸相对尺寸1 物理像素尺寸以示范页面为例，在不同尺寸下希望效果如下标题一直按照如图所示铺满三行「相对尺寸」标题下方的分割线上下 margin、主要内容四周的 padding 尺寸依据 device-width 变化 「逻辑像素尺寸」分割线以设备所能达到的最细效果展示 「1 物理像素尺寸」图片宽度占 100%，高度等比缩放 「相对尺寸」正文...
HTML5移动端视口详解：布局与视觉视口关系及CSS应用
1. **布局视口（layout viewport）**：这是默认存在于移动设备浏览器中的虚拟视口，用于解决早期网页在手机上显示的问题。iOS和Android设备通常将其设置为980px宽，使得PC网页在移动设备上勉强显示，但元素会显得...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小黄呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值