网络编程&移动端布局&笔记总结
1.移动端现状
了解移动端浏览器的内核、屏幕分辨率的问题;
1.1内核
国产主流手机浏览器,内核 Webkit。
1.2屏幕分辨率
- 手机分辨率:碎片化太多
- Android:480x800, 480x854, 540x960, 720x1280,1080x1920 等
- iPhone:640x960, 640x1136, 750x1334, 1242x2208 等
- 2K:手机分辨率
1.3谷歌浏览器
- 是开发过程中的主要模拟手段;
- 步骤:
- 1.鼠标右键 检查 或 F12 控制器界面方向;
- 2.选择 手机模式
- 3.选择 手机类型及尺寸;调节适当的显示比例;
- 4.点右键 查看 页面元素;
2.viewport(视口)
视口:PC端的页面直接放入手机屏显示,不友好。内容原因没有设置viewport;
2.1定义
- 视口:浏览器(PC、移动端)显示页面内容的屏幕区域;不同的屏幕的大小,我们看到的区域也是不同的;
- viewport就是为了解决上面问题;
2.2设置前
HTML默认为980px不是很合适;
那么设置HTML宽度多少为合适呢?我们眼睛能看到的,屏幕的窗口多大,设置多大就合适
2.3语法
- 默认:HTML980px;
- 理想:手机屏幕多大,HTML就设置是多大;
- meta标签设置:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- width=device-width:改变HTML默认的980px 为 屏幕的宽度;
- user-scalable: 是否允许用户缩放屏幕 值:no(0不允许) yes(1允许);
- initial-scale:初始化缩放比例;1.0:不缩放;
- maximum-scale:用户对页面的最大缩放比例;值:比例
- minimum-scale:用户对页面的最小缩放比例;值:比例
3.二倍图
3.1物理像素点
- 指计算机显示设备中的最小单位,即一个像素点的大小。每一个像素点可以理解为就是屏幕上的一个发光点。每个点可以发一个颜色,就是我们看到的画面。
- 早期的屏幕,物理像素点都比较大,比如玩游戏的超级玛丽的画面的颗粒感很强:随着技术的进步,物理像素点会被做的越来越小;会被做小;
3.2屏幕分辨率
- 屏幕分辨率:物理像素点的个数来衡量,表示屏幕水平和垂直方向的物理像素点的个数,物理像素点有多少个;
- iPhone3和iPhone4是同一个屏幕尺寸下,比较分辨率:
- Retina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里;从而达到更高的分辨率,并提高屏幕显示的细腻程度。
- 物理像素点:越做越小;(iPhone4坑的宽度是iPhone3物理像素点的宽度一半)
3.3图片分辨率
- 假设:有200*200分辨率的图片,展示在宽度分别是320(iphone3)、640(iphone4)分辨率的手机上,展示的效果如下:
分析:
- 200*200分辨率的图片:200个颜色发光点;
- 一个物理像素点发一个颜色:屏幕都需要200个物理像素点;
- 物理像素点的宽度大小:320(1);640(0.5);
- 所以显示为上图。
问题:不同的屏幕下,显示的图片大小是不一样;
- 宽度:第2个是第1个的0.5倍;
- 面积:第2个是第1个的1/4倍;
目标:显示一样;
解决:
- 物理像素点的宽度大小:i3(1);i4(0.5);
- 物理像素点的数量:320(1 x 200=200长度)、640(0.5 x 400=200长度);都是200长度,才能保证显示的大小一样;
移动端:
- 上面这个都是200长度到底如何设置呢?
- 设置CSS 宽高200px后,会自动保证每个屏幕显示元素大小一样,
- 会自动算出不同屏幕下,背后需要提供物理像素点需要多少个。
- 针对上面,每个手机会自动算出要给图片准备200个物理像素点、400个物理像素点;
3.4二倍图由来
- 开始:设置CSS像素200px宽,320分辨率(200),640分辨率(400);这样才显示一样;
- 像针对640分辨率手机屏(iPhone4),要求设计给400*400图,对应我们CSS设置200px,有二倍的关系;
- 命名:
- xxxxx@2x.png:二倍图
- xxxxx@3x.png:三倍图
4.移动端常见布局
了解常见布局不同,针对业务需求选择不同的方案;实际开发过程中,都是混合使用,没有哪一种是绝对的单独使用;
4.1单独制作移动端页面
- 流式布局 (百分比布局)
- flex弹性布局 (强列推荐)
- less+rem+媒体查询布局
- 混合布局
4.2响应式页面兼容移动端
- 媒体查询
- bootstrap
4.3方案
- 单独制作:淘宝、京东、苏宁手机端都是单独制作的,流式、flex、rem布局、专门针对各种手机屏幕进行开发。
- 响应式:三星电子官网。www.samsung.com/cn/ ;特点:可兼容PC 移动端,一个页面多个端适配显示;制作起来要考虑到兼容性的样式。
- 选择:公司业务需求;
4.4样式初始化-了解
- 国产移动浏览器基本以 webkit 内核为主,因此我们就考虑webkit兼容性问题。
- normalize.css:大家以前自己写的base.css
- http://necolas.github.io/normalize.css/
- 保护了有价值的默认值;
- 修复了浏览器的bug;
5.仿京东移动端布局代码
5.1 HTML
<!DOCTYPE html>
<html lang="en">
<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>JD_demo</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 顶部 -->
<header>
<div class="close">
<img src="./images/close.png" alt="">
</div>
<div class="logo">
<img src="./images/logo.png" alt="">
</div>
<div class="info">打开京东App,购物更轻松</div>
<div class="open">立即打开</div>
</header>
<!-- 搜索区 -->
<div class="search">
<div class="left">
<img src="./images/s-btn.png" alt="">
</div>
<div class="mid">
<span class="jd"></span>
<span class="fangda"></span>
</div>
<div class="right">登录</div>
</div>
<!-- 轮播图 -->
<div class="banner">
<a href="#">
<img src="./upload/banner.dpg" alt="">
</a>
</div>
<!-- 小家电 -->
<div class="shops">
<a href="#">
<img src="./upload/pic11.dpg" alt="">
</a>
<a href="#">
<img src="./upload/pic22.dpg" alt="">
</a>
<a href="#">
<img src="./upload/pic33.dpg" alt="">
</a>
</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/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/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="./upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</nav>
<!-- news -->
<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>
</body>
</html>
5.2 css
index.css
body {
width: 100%;
/* 限制 :市场约定,不能比320px 宽度*/
min-width: 320px;
/* 最大 :根据公司的业务 */
max-width: 640px;
margin: 0 auto;
font-size: 14px;
background-color: #ccc;
}
a {
text-decoration: none;
}
/* ------------------------------顶部栏 */
header {
height: 45px;
}
header div {
float: left;
height: 45px;
background-color: #222;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 14px;
}
header div:nth-child(1) {
width: 8%;
}
header div:nth-child(1) img {
width: 10px;
}
header div:nth-child(2) {
width: 10%;
}
header div:nth-child(2) img {
width: 30px;
vertical-align: middle;
}
header div:nth-child(3) {
width: 57%;
}
header div:nth-child(4) {
width: 25%;
background-color: red;
}
/* ----------------------------------------search */
.search {
height: 44px;
/* 固定定位:宽度100%失效*/
position: fixed;
/* 固定定位,相对于当前屏幕的宽度 */
width: 100%;
/* 不受body 管理,但是要求search又要和body 一样 */
/* 限制 :市场约定,不能比320px 宽度*/
min-width: 320px;
/* 最大 :根据公司的业务 */
max-width: 640px;
/* 解决塌陷问题 */
overflow: hidden;
/* background-color: #222; */
}
.search .left {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 44px;
}
.search .left img {
width: 20px;
margin: 14px 0 0 15px;
}
.search .mid {
/* 不要指定宽度 */
margin: 0 50px;
margin-top: 7px;
height: 30px;
background-color: #fff;
border-radius: 15px;
position: relative;
}
.search .mid .jd {
width: 20px;
height: 15px;
background: url('../images/jd.png');
/* 当前盒子*/
background-size: 20px;
position: absolute;
top: 7px;
left: 15px;
}
/* 小竖线 */
.search .mid .jd::before {
content: "";
position: absolute;
top: 0;
right: -5px;
width: 1px;
height: 15px;
background-color: #ccc;
}
.search .mid .fangda {
width: 15px;
height: 15px;
background: url('../images/jd-sprites.png') no-repeat;
background-position: -83px 0;
background-size: 199px;
position: absolute;
top: 8px;
left: 45px;
}
.search .right {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 44px;
line-height: 44px;
color: #fff;
}
/* ------------------------------- */
.banner {}
.banner a {}
.banner a img {
width: 100%;
display: block;
}
/* ----------------------------------- */
.shops {
overflow: hidden;
}
.shops a {
float: left;
width: 33.33%;
}
.shops a img {
width: 100%;
}
/* ---------------------------------nav */
nav {
margin: 20px 0;
overflow: hidden;
}
nav a {
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 40px;
margin: 8px 0;
}
nav a span {
display: block;
color: #666;
}
/* ---------------------------news */
.news {}
.news a {
float: left;
width: 25%;
box-sizing: border-box;
}
.news a:nth-child(1) {
width: 50%;
}
.news a img {
width: 100%;
}
.news a:nth-child(2),
.news a:nth-child(3) {
border-left: 1px solid #ccc;
}
normalize.css
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
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
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 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
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 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 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* 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 style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* 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
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 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;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* 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;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 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 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
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 and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[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 IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}