H5基础_4_移动端布局

最新推荐文章于 2024-04-28 13:46:58 发布

Odoo老赵

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量518

点赞数

分类专栏：大前端文章标签：前端 html javascript

本文链接：https://blog.csdn.net/jiafeitutu/article/details/130899270

版权

大前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

灵魂拷问：

浏览器能干什么？

我能让浏览器干什么？

前端开发：

一点点的空间想象力
一点点的小学数学知识
一点点的艺术鉴赏能力

移动端布局

移动端浏览器大部分是webkit内核，所以兼容性比较好。

屏幕分辨率非常多，碎片化严重

不要去纠结dp dpi pt ppi等单位

调试方法

视口 viewport

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

布局视口 layout viewport

手机厂商为了兼容pc网站，给了980px的布局视口，但是手机屏幕太窄，布局视口只能压缩。结果就是

文字太小。体验不好。

视觉视口

用户正在看到的网站的区域

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

理想视口 ideal viewport（乔布斯提出的）

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

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

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

因为要照顾众多设备，是不是就不能以像素来布局了？(通过后面的学习才知道，确实是这样子)

meta name=“viewport” content="width=deive-width, user-scalable=no

,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"

主要意思就是宽度=设备宽度，不要缩放

二倍图

物理像素物理像素比

物理像素就是分辨率，是真实存在的

我们开发的时候写的1px和物理像素不一定相等，在pc端是一一对应的

1px=n个物理像素

手机屏幕更细腻，每个像素尺寸更小， Retina（视网膜屏幕）每英寸300像素以上

为了保证图片在移动端不失真，css像素5050，那么就准备100100的图片，缩小后放在盒子里

那么到手机端显示会自动显示成100*100像素的，图片不模糊。

背景图片缩放大小： background-size:

可以只写一个值，的另外一个值等比例缩放
可以写百分比，父盒子
cover ：完全覆盖，可能有部分背景图片显示不全（等比拉伸）
contain：只要有一边填满盒子就停止放大（等比拉伸）

移动端技术解决方案

移动端浏览器以webkit为主，因此就考虑webkit就行

放心大胆的用html5和css3新特性。

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

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

官网地址： http://necolas.github.io/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;
}

针对webkit内核的优化：

/* 点击高亮我们需要清除清除，设置为transparent完成透明 */
* {
    -webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式 */

input {
    -webkit-appearance: none;
}

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

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