灵魂拷问:
浏览器能干什么?
我能让浏览器干什么?
前端开发:
- 一点点的空间想象力
- 一点点的小学数学知识
- 一点点的艺术鉴赏能力
移动端布局
移动端浏览器大部分是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;
}
css盒子模型可以放心大胆用
初始化
移动端技术选型:
1 单独制作移动端页面(主流)
- 流式布局
- flex弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
2 响应式页面兼容移动端
- 媒体查询
- bootstrap
流式布局(百分比布局)
流式布局,百分比布局,也称非固定像素布局
通过盒子的宽度设置为百分比来根据屏幕的宽度来伸缩,不受固定像素的限制,内容向两侧填充
二倍精灵图:
先缩小一半然后再去测量坐标。
css中指定background-size 缩小一半。
固定定位的盒子一定要有宽度,有最小宽度和最大宽度
webp格式
谷歌开发的,jpeg大小的2/3
dpg格式
京东开发的,大小是webp的50%
flex布局
传统布局和flex布局
传统布局: 兼容性好 布局繁琐 局限性,不能在移动端很好的布局
flex布局: 操作方便,布局极为简单 移动端应用很广 pc端浏览器支持较差
pc端: 还是用传统布局
移动端: flex布局
flex布局原理
flex flexible box 为盒子模型提供最大的灵活性,任何一个容器都可以指定为flex布局
- 当我们为父盒子指定为flex时,子元素的float clear vertical-align失效
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素,称为flex容器,所有的子元素自动成为容器成员,简称flex项目flex item
子容器可以横向排列也可以纵向排列
总结flex布局原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
flex布局常见属性
flex-direction
设置主轴的方向
主轴,默认是X方向(行,水平向右) 元素跟着主轴来排列
侧轴 ,默认Y轴方向(列,垂直向下)
- row ( 从左往右)
- row-reverse (从右往左)
- column: (从上往下)
- column-reverse ( 从下往上)
通过flex-direction设置主轴方向,剩下的就是侧轴。
justify-content
主轴上子元素的排列方式
- flex-start 默认值从头部开始
- flex-end 从尾部开始排列
- center 居中对齐
- space-around 平均分配剩余空间
- space-between 两边靠边,中间的空间平均分配
flex-wrap
设置子元素是否换行
flex-wrap 默认不换行,装不开会缩小子元素宽度
nowrap 默认值
wrap 换行
align-items
设置侧轴上子元素的排列方式(单行)
- flex-start 默认值从头部开始
- flex-end 从尾部开始排列
- center 居中对齐
- stretch 拉伸到跟父盒子一样高(子盒子不要设置height)
align-content
设置子元素在侧轴上的排列方式(对多行有效)
-
flex-start 默认值从头部开始
-
flex-end 从尾部开始排列
-
center 居中对齐
-
space-around 平均分配剩余空间
-
space-between 两边靠边,中间的空间平均分配
单行找align-items 多行找align-content(主轴方向)
flex-flow
flex-direction 和 flex-wrap的复合属性
flex-flow: row wrap;
flex总结:
- 确定flex 流 flex-flow: row wrap;
- 确定主轴上子元素的排列方式 justify-content
- **确定侧轴上子元素的排列方式 ** align-items align-content
flex布局子项常见属性
flex:1 子项目占的份数 (分的是剩余空间)
align-self 控制子项目自己在侧轴的排列方式
order属性定义子项的排列顺序