移动端学习

目录

1. 移动端基础

1.1 浏览器

1.2 手机屏幕

1.3 常见移动端屏幕尺寸

1.4 移动端调试方法

2.视口

meta视口标签

3.二倍图

3.1 物理像素&物理像素比

3.2 多倍图

4.移动端开发选择

5.移动端技术解决方案

CSS初始化 normalize.css

C3盒子模型 box-sizing: border-box;

 6.移动端常见布局

 6.1 流式布局(百分比布局)

Flex布局

1.布局原理

2.常见父项属性

flex-direction: 设置主轴方向

2.1 主轴与侧轴

2.2 属性值

justify-content: 设置主轴上的子元素的排列方式

flex-wrap: 设置子元素是否换行

align-items: 设置侧轴上的子元素的排列方式(多行)

align-content: 设置侧轴上的子元素的排列方式(多行)

flex-flow: 复合属性,相当于同时设置了flex-direction和flex-wrap

3.flex布局子项常见属性

 3.1 flex属性

3.2 align-self控制子项自己在侧轴上的排列方式

3.3 order属性定义项目的排列顺序

背景渐变 linear-gradient

rem适配布局

1.rem基础

rem单位

不同的是rem是相对于html元素的字体大小,与父元素无关

2.媒体查询

 语法规范

 2.1 mediatype查询类型

2.2 关键字

2.3 媒体特性

2.3 媒体查询+rem实元素动态大小变化

2.4 引入资源

3.Less基础

3.1 Less变量

 3.2 Less编译

3.3 Less嵌套

 3.4 Less运算

4.rem适配方案

 方案一

响应式布局 

Bootstrap


1. 移动端基础

1.1 浏览器

兼容移动端浏览器,处理Webkit内核浏览器

1.2 手机屏幕

常用尺寸单位px

1.3 常见移动端屏幕尺寸

前端开发,不建议纠结dp,dpi,pt,ppi等单位

1.4 移动端调试方法

  1. Chorme DevTools(谷歌浏览器)的模拟手机测试
  2. 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
  3. 使用外网服务器,直接IP或域名访问

2.视口

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

(视觉视口指用户能看到的网络区域)

meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,也就是设备多宽,理想视口多宽。

meta视口标签

移动端学习_第1张图片

3.二倍图

3.1 物理像素&物理像素比

  • 物理像素是我们所说的分辨率。
  • 物理像素比是一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
  • 在iPhone8中,1px开发像素=2个物理像素

3.2 多倍图

插入图片

/* 在iphone8下面 */
img {
    /* 原始图片100*100px */
    width: 50px;
    height: 50px;
}
.box {
    /* 原始图片100*100px */
    background-size: 50px 50px;
}

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

  • 单位:长度|百分比|cover|contain
  • cover等比例把背景图片扩展至足够大,使背景图像完全覆盖背景区域,可能会部分背景图片显示不全
  • contain等比例把图像扩展至最大尺寸,使其宽度和高度完全适应内容区域,当宽度或高度铺满盒子就不再拉伸了,可能有部分空白区域

4.移动端开发选择

1.单独制作移动端页面(主流):通常,网址域名前加 m(mobile) 可以打开移动端。

通过判断设备,如果是移动设备打开,则跳到移动端页面。

2.响应式页面兼容PC移动端

5.移动端技术解决方案

CSS初始化 normalize.css

官网: https://necolas.github.io/normalize.css/

C3盒子模型 box-sizing: border-box;

加上这行代码后,padding和border不会撑大盒子。

传统盒子模型 box-sizing: content-box;

移动端学习_第2张图片

 6.移动端常见布局

 6.1 流式布局(百分比布局)

可设置最大值max-width max-height , 最小值min-width min-height


常用初始化样式

body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system,Helvetica,sans-serif;
    line-height: 1.5;
    color: #666;
}

二倍精灵图做法

  1. 在firework里把精灵图等比例缩放为原来的一半
  2. 根据大小测量坐标(注意代码中backgroung-size也要写:精灵图原来宽度的一半)

图片格式

移动端学习_第3张图片


Flex布局

1.布局原理

flexible Box的缩写,意为“弹性布局”。用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。

  • 当我们为父盒子设置flex布局后,子元素的float、clear和vertical-align属性将失效。
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

总结:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。

2.常见父项属性

  • flex-direction: 设置主轴方向
  • justify-content: 设置主轴上的子元素的排列方式
  • flex-wrap: 设置子元素是否换行
  • align-content: 设置侧轴上的子元素的排列方式(多行)
  • align-items: 设置侧轴上的子元素的排列方式(单行)
  • flex-flow: 复合属性,相当于同时设置了flex-direction和flex-wrap

flex-direction: 设置主轴方向

2.1 主轴与侧轴

  • 默认的主轴方向为x轴方向,水平向右
  • 默认的侧轴方向为y轴方向,竖直向下

2.2 属性值

注: 主轴侧轴会变化,看flex-direction设置谁为主轴,剩下的就是侧轴,子元素跟着主轴排列

属性值 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

justify-content: 设置主轴上的子元素的排列方式

该属性定义了项目在主轴上的对齐方式(一定先确定好主轴是哪个)

属性值 说明
flex-start 默认值 从头部开始,如果主轴是x轴,则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴则水平居中)
space-around 平分剩余空间
space-between 先两边贴边,在平分剩余空间

flex-wrap: 设置子元素是否换行

属性值 说明
nowrap 默认值,不换行
wrap 换行

align-items: 设置侧轴上的子元素的排列方式(多行)

属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸(默认值)

align-content: 设置侧轴上的子元素的排列方式(多行)

在align-items基础上增加

space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间

flex-flow: 复合属性,相当于同时设置了flex-direction和flex-wrap

flex-flow: row wrap;

3.flex布局子项常见属性

  • flex子项目占的份数
  • align-self控制子项自己在侧轴的排列方式
  • order属性定义子项的排列顺序

 3.1 flex属性

flex属性定义子项目分配剩余空间,用flex来表示占多少份数

.item {
    flex: ; /* default 0 */
}

3.2 align-self控制子项自己在侧轴上的排列方式

align-self可覆盖align-items,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch.

span:nth-child(2){
    /* 设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}

3.3 order属性定义项目的排列顺序

数值越小,排列越靠前,默认为0(和z-index不一样)

!important 权重无穷大

背景渐变 linear-gradient

背景线性渐变(需要添加浏览器私有前缀)

语法1

background: linear-gradient(起始方向,颜色1,颜色2);
background: -webkit-linear-gradient(left,red,blue);
background: -webkit-linear-gradient(left,top,red,blue);

起始方向可以是: 方位名词 或者 度数,如果省略默认就是top


rem适配布局

1.rem基础

rem单位

  • rem(root em)是一个相对单位,类似于em,em是相对于父元素字体大小
  • 不同的是rem是相对于html元素的字体大小,与父元素无关

eg.根元素(html)设置font-size=12px;非根元素设置width,换成px表示就是24px

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小从而实现整体控制

2.媒体查询

  • 使用@media查询,可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机、平板等设备都用得到媒体查询

 语法规范

@media mediatype and|not|only (media feature){
    CSS-Code;
}
  • 用@media开头,注意@符号
  • mediatype媒体类型
  • 关键and not only
  • media feature 媒体特性,必须有小括号包含

 2.1 mediatype查询类型

将不同的终端设备划分成不同的类型,称为媒体类型

解释说明
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕,平板电脑,智能手机等

2.2 关键字

将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

  • and: 可以将多个媒体特性连接到一起,相当于"且"的意思
  • not: 排除某个媒体类型,相当于“非”的意思
  • only: 指定某个特定的媒体类型,可以省略

2.3 媒体特性

每种媒体类型都具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格(注意加小括号包含)

值  解释说明
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域的宽度
max-width 定义输出设备中页面最大可见区域的宽度

2.3 媒体查询+rem实元素动态大小变化

2.4 引入资源

针对不同的屏幕尺寸,调用不同的css文件

3.Less基础

Less中文网址: http://lesscss.cn/

Less是一门CSS预处理语言,它扩展了CSS的动态特性

3.1 Less变量

@变量名:值;

变量命名规范

  • 必须有@前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

 3.2 Less编译

用VS Code中的Easy LESS插件

3.3 Less嵌套

子元素的样式直接写到父元素里面

遇到交集/伪类/伪元素选择器:

  • 内层选择器的前面没有&符号,则他被解析为父选择器的后代
  • 如果有&符号,则被解析为父元素自身或父元素的伪类
    /* CSS中写法 */
    a:hover {
        color: red;
    }
    /* Less中写法 */
    a {
        &:hover {
            color: red;
        }
    }

 3.4 Less运算

任何数字、颜色、变量都可以参与加减乘除运算。

注:

  • 运算符中间左右各有一个空格隔开1px + 5
  • 对于两个不同单位的值之间的运算,运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位,则运算结果就取该单位

4.rem适配方案

 方案一

rem+媒体查询+less技术

设计稿常见尺寸宽度

设备 常见宽度
iphone 4 5 640px
iphone 678 750px
Android 大部分4.7~5寸的安卓设备为720px

动态设置html标签font-size大小

移动端学习_第4张图片

 元素大小取值方法

 将一个样式(css)文件导入另一个样式文件中: @import"css文件名"

区别于link,link是把一个样式文件引入 html 页面中

方案2 

rem+flexible.js

github地址:https://github.com/amfe/lib-flexible


响应式布局 

设备划分 尺寸区间 宽度
超小屏幕(手机) <768px 100%
小屏设备(平板) >=768px ~ <992px 750px
中等屏幕(桌面显示器) >=992px ~ <1200px 970px
宽屏设备(大桌面显示器) >=1200px 1170px

Bootstrap

中文官网: http://www.bootcss.com/

官网: http://getbootstrap.com/

推荐使用: http://bootstrap.css88.com/

你可能感兴趣的:(前端学习,css3,前端,html)