DAY 13 | 自学前端第十三天

pangpangcm

已于 2022-04-26 22:05:44 修改

阅读量123

点赞数 1

分类专栏：前端自学笔记文章标签： html5 css3

于 2022-04-20 20:53:17 首次发布

本文链接：https://blog.csdn.net/weixin_39108774/article/details/124307031

版权

前端自学笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

今天学习移动端开发流式布局

一、移动端基础

1.1浏览器现状

PC端——360、谷歌、火狐、QQ、百度、搜狗、IE
移动端——UC、QQ、欧朋、百度手机、360安全、谷歌、搜狗手机、猎豹

移动端发展晚一点，兼容性更好。
兼容移动端主流浏览器，基本处理webkit内核浏览器即可。

1.2 手机屏幕现状

尺寸多，分辨率大，碎片化严重

1.3 常见屏幕尺寸

iPhone6 plus——5.5英寸
iPad2020——10.2

1.4 移动端调试方法

搭建本地服务器
搭建外网服务器

移动端开发主要开发手机，分辨率和屏幕尺寸大小不一。

二、视口

viewport 视口就是浏览器显示页面内容的屏幕区域。

视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口 layout viewport

布局视口用于PC端页面在手机上显示
iOS Android 基本将视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面
手机大小有不同尺寸

2.2 视觉视口 visual viewport

用户正在看到的网站的区域 注意：是网站的区域
可以通过缩放去操作视觉视口

2.3 理想视口 ideal viewport

需要手写 meta视口标签通知浏览器操作
meta视口标签主要目的：布局视口的宽度应该和理想视口宽度一致，简单理解设备有多宽，布局视口就多宽

2.4 meta视口标签

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

2.5 标准的viewpoint 设置

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

三、二倍图

3.1 物理像素&物理像素比

物理像素指屏幕显示的最小颗粒，分辨率
开发时1px和物理像素不一定相等
PC端页面，1px等于一个物理像素，但移动端各不相同
1px能显示的物理性素点的个数，叫物理像素比
早期手机1CSS像素=1物理像素
Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率

3.2 多倍图

文字或者纯色盒子放大后影响不大，但是图片放大后会模糊
图片在手机端需要专门处理，在标准的viewport中采取倍图提高图片质量
用的最多的是2倍图，市场上也有3倍图4倍图
2倍图准备手机想要显示的2倍像素，自动缩放不会模糊

3.3 背景缩放 background-size

 background-size: 500px, 200px;

 <title>背景缩放</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/img.png) no-repeat;
            background-size: 500px, 200px;
            /* 只写一个，一定是宽度，高度随着宽度等比例拉升 */
            background-size: 200px;
            /* 完全覆盖整个盒子 */
            background-size: cover;
            /* 图片最大尺寸  宽高等比拉伸，宽高其中一方铺满  可能有部分空白区域 */
            background-size: contain;
        }
    </style>
</head>

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

四、移动端开发选择

4.1 移动端主流方案

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

京东商城手机版
淘宝触屏版
苏宁易购手机版

响应式页面兼容移动版（其次）

三星手机官网

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

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

4.3 响应式页面兼容移动版（其次）

三星官网，通过判断屏幕宽度来改变样式，以适应不同终端

缺点：制作麻烦，需要花很大精力去调兼容性问题

4.4 总结

单独制作是我们最喜欢的一种方案

根据公司实际情况来选择。

五、移动端技术解决方案

5.1 移动端浏览器

大多以webkit内核为主，可以放心使用h5和css3样式

5.2 CSS初始化 normalize.css

保护有价值的默认值
修复浏览器bug
是模块化的
有详细的文档

Normalize.css: Make browsers render all elements more consistently.

5.3 CSS3 盒子模型 box-sizing

传统盒子模型：盒子宽度=css中设置的width+border+padding

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

也就是说，css3盒子模型，padding和border不会撑大盒子了

传统还是CSS3盒子模型？

移动端全部css3盒子模型
PC端如果完全需要兼容，就用传统模式，如果不考虑兼容性，就选css3

5.4 特殊样式

 <title>特殊样式</title>
    <style>
        a {
            -webkit-tap-highlight-color: transparent;
        }

        /* input {
            苹果自带样式不想要
            -webkit-appearance: none;
        } */
    </style>
</head>

<body>
    <a href="#">胖胖</a>
    <input type="button" value="按钮">
</body>

六、移动端常见布局

移动端技术选型：单独制作移动端页面&响应式兼容移动端

单独制作移动端页面

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

响应式兼容移动端

媒体查询
bootstrap

6.1 流式布局（百分比布局）

非固定像素布局
设置盒子的百分比根据屏幕宽度伸缩
移动web开发使用的比较常见的布局方式
max-width 最大宽度
min-width 最小宽度

七、京东移动端首页案例：

1.技术选型

单独制作移动端
流式布局

2.搭建文件夹

二倍精灵图做法：

将精灵图等比例缩放一半（Ctrl+T PS）
把background-size缩小成精灵图原来的一半
测图标位置

图片格式：

DPG图片压缩技术：京东自主研发，节省用户50%左右的浏览流量，提升网页打开速度。

webp图片格式：谷歌开发的，加快图片加载速度的图片格式，图片压缩体积大约只有JPEG的2/3，并节省大量的服务器宽带资源和数据空闲。

7.1 normalize.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   /**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

7.2 index.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, 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>京东移动端</title>
</head>

<body>
    <!-- 顶部模块 -->
    <header class="app">
        <ul>
            <li>
                <img src="images/app.png" alt="">
            </li>
            <li>
                <img src="images/jd.png" alt="">
            </li>
            <li><a href="#">打开京东APP，购物更轻松</a></li>
            <li><a href="#">立即打开</a></li>
        </ul>
    </header>
    <!-- 搜索模块 -->
    <div class="search_wrap">
        <div class="search_btn"></div>
        <div class="search">
            <div class="jd_logo"></div>
            <div class="sou"></div>
        </div>
        <div class="search_login">登录</div>
    </div>
    <!-- 主体内容 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="upload/nav.jpg" alt="">
        </div>
        <!-- 小家电品牌日 -->
        <div class="brand">
            <div>
                <a href="#"><img src="upload/shop.webp" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="upload/shop.webp" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="upload/shop.webp" alt=""></a>
            </div>
        </div>
        <!-- nav部分 -->
        <nav>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="images/car.png" alt="">
                <span>京东超市</span>
            </a>
        </nav>
        <!-- news模块 -->
        <div class="news">
            <a href="#"><img src="upload/shop.webp" alt=""></a>
            <a href="#"><img src="upload/shop.webp" alt=""></a>
            <!-- <a href="#"><img src="upload/shop.webp" alt=""></a> -->
        </div>
    </div>
</body>

</html>

7.3 index.css

body {
    width: 100%;
    max-width: 812px;
    min-width: 375px;
    margin: 0 auto;
    color: #666;
    font-size: 14px;
    background-color: rgb(250, 244, 244);
}
a {
    color: #fff;
    text-decoration: none;
}
img {
    /* 去除图片之间空白缝隙 */
    vertical-align: middle;
}
.app {
    height: 45px;
}
.app ul {
    margin: 0;
    padding: 0;
}
.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333;
    list-style: none;
    text-align: center;
    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: red;
}
/* 搜索 */
.search_wrap {
    position: fixed;
    height: 44px;
    width: 100%;
    background-color: rgb(207, 29, 29);
    overflow: hidden;
    min-width: 375px;
    max-width: 812px;
}
.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/app.png) no-repeat;
    background-size: 20px 18px;
    margin: 16px 0 0 15px; 
}
.search {
    position: relative;
    height: 30px;
    margin: 7px 50px;
    border-radius: 22px;
    background-color: #fff;
    border: 1px solid #fff;
}
.search_login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    line-height: 44px;
    color: #FFF;
}
.jd_logo {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 20px;
    height: 15px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}
.jd_logo::after {
    position: absolute;
    top: 1px;
    right: -20px;
    content: '';
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.sou {
    position: absolute;
    top: 8px;
    left: 55px;
    width: 18px;
    height: 15px;
    /* 精灵图缩放怎么做 */
    background: url(../images/jd-sprites.png) no-repeat -82px 0;
    background-size: 200px auto;
}
.main-content {
    margin-top: 20px;
}
.slider img {
    width: 100%;
}
.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div {
    float: left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}
/* nav 模块 */
nav {
    overflow: hidden;
}
nav a {
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav span {
    display: block;
    color: #666;
}
/* news模块 */
.news {
    margin-top: 20px;
}
/* .news a:nth-child(1) {
    width: 50%;
}
.news a:nth-child(n+2) {
    width: 25%;
} */
.news img {
    width: 100%;
}
.news a {
    float: left;
    width: 50%;
}