移动端基础

最新推荐文章于 2023-10-07 10:20:15 发布

小小小的学习日记

最新推荐文章于 2023-10-07 10:20:15 发布

阅读量549

点赞数

分类专栏：移动端学习文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_45108629/article/details/120939682

版权

移动端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

视口

布局视口 layout viewport
视觉视口 visual viewport
理想视口 ideal viewport

移动端布局理想视口：手机屏幕有多宽，布局视口就有多宽

添加meta视口标签

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

pc端页面 1px=1个物理像素

但移动端不一定

1px能显示的物理像素点的个数称为物理像素比

背景缩放

background-size:背景图片高度背景图片宽度

长度px|百分比|cover|contain

只写一个参数肯定是宽度高度省略了会等比例缩放

cover 等比例拉伸要完全覆盖div盒子可能有部分背景图片显示不全

contain 高度和宽度等比例拉伸当宽度或者高度铺满div盒子就不再进行拉伸了可能有部分空白区域

背景线性渐变

background:-webkit-linear-gradient(起始方向，颜色1，颜色2，……)
起始方向可以是 方位名词 或者 度数

背景渐变必须添加浏览器私有前缀

移动端开发选择

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

单独制作移动端页面(主流)	响应式页面兼容移动端(其次)
1.流式布局（百分比布局）	通过判断屏幕宽度来改变样式以适应不同终端
2.flex弹性布局	媒体查询
3.less+rem+媒体查询布局	bootstrap
4.混合布局

CSS初始化推荐使用normalize.css

流式布局

流式布局，就是百分比布局，也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充

min-width最小宽度

max-width最大宽度

二倍精灵图

在firework里把精灵图宽高缩一半
再测量坐标
background-size:精灵图宽度的一半 auto;

flex布局

采用flex布局的元素称为flex container 简称容器

它的所有子元素自动成为容器成员称为flex item 简称项目

任何一个容器都可以指定为flex布局

父盒子设为flex布局后，子元素的float,clear,和vertical-align属性将失效

flex布局原理：通过给父元素添加flex属性来控制子元素的位置和排列方式

常见父项属性

属性	含义	默认属性值	属性值
flex-direction	设置主轴方向	默认主轴为x轴水平向右，侧轴为y轴垂直向下 flex-direction:row	row row-reserve column column-reserve
justify-content	设置主轴上子元素的排列方式	默认justify-content:flex-start	flex-start(从头部开始排列) flex-end(从尾部开始排列) center(在主轴居中对齐) space-around(平分剩余空间) space-between(先两边贴边再平分剩余空间)
flex-wrap	设置子元素是否换行	默认flex-wrap:nowrap	nowrap不换行 wrap换行
align-items	设置侧轴上子元素的排列方式(单行)	默认align-items:stretch	flex-start flex-end center stretch(拉伸)
align-content	设置侧轴上子元素的排列方式(多行)	默认align-content:flex-start	flex-start flex-end center space-around space-between stretch
flex-flow	复合属性，同时设置flex-direction和flex-wrap

单行找align-items

多行找align-content

子项常见属性


felx	子项平分剩余空间所占份数比如 flex:1 flex:20%
align-self	子项自己在侧轴上的排列方式
order	定义子元素的排列顺序(数字越小越靠前，默认0)

rem适配布局

使用媒体查询根据不同的设备按比例设置html的字体大小

页面元素使用rem为单位

当html字体大小变化页面元素尺寸也会发生变化

从而达到等比例缩放的适配

rem单位

em相对于父元素 的字体大小来说的

rem 相对于html元素字体大小来说的

页面元素的rem值=页面元素值/html font-size

媒体查询

media query

针对不同的媒体类型定义不同的样式

@media mediatype媒体类型 and|not|only关键字 (media feature媒体特性){
    
}

mediatype媒体类型	关键字	媒体特性
all：用于所有设备	and 且	width
print：用于打印机和打印预览	not 非	min-width
screen：用于电脑屏幕，平板电脑，智能手机	only 指定特定的媒体类型	max-width

引入资源

<link rel="stylesheet" href="my.css" media="mediatype and|not|only (media feature)">

针对不同的媒体使用不同的样式表

直接在link中判断设备尺寸然后引入css文件

维护css弊端

css 非程序式语言，没有变量，函数，scope作用域等概念

冗余度高

不方便维护，不利于复用

没有很好的计算能力

Less

是css扩展语言,在现有的css语法上为css加入程序式语言的特性

常见的css预处理器：less,sass,stylus

less变量

@变量名：值
变量名以@开头
变量名不能包含特殊字符
变量名不能以数字开头
变量名大小写敏感

less编译

less包含一套自定义的语法及一个解析器

用户根据这些语法定义自己的样式规则

这些规则会通过解析器编译生成对应的css文件

vscode插件easy less 把.less文件编译为.css文件

less嵌套

@width:10px;
div{
    p{
        width:@width + 10;
    }
}

a{
    &:hover{
        样式
    }
}

内层选择器的前面没有**&符号**，则被解析为父选择器的后代
如果有**&符号**，则被解析为父元素自身或父元素的伪类

less运算

任何数字,颜色或者变量都可以参与运算

less提供了**加+减-乘*除/**算术运算

运算符中间左右有空格
两个不同单位的值运算，运算结果的值为第一个值的单位
两个值只有一个有单位，运算结果就取该单位

rem适配方案技术

技术方案一

less+媒体查询+rem

设计稿常见尺寸宽度

设备	常见宽度
iphone 4.5	640px
iphone 678	750px
Andriod	320px 360px 375px 384px 400px 414px 500px 720px

现在基本以750px为准

假设设计稿为750px,把整个屏幕分为15等份，一份就是50px,那html的font-size就为50px =1rem

页面元素rem值=页面元素值(px) / (屏幕宽度/划分的份数)

比如80px，80 rem / (750/15)

在index.css中导入common.css @import "common"

技术方案二

flexible.js+rem

淘宝团队出的简洁高效的移动端适配库

不需要再写在不同屏幕下的媒体查询，因为里面js做个处理

它的原理是：把当前屏幕划分为10等份，但在不同设备下，比例还是一致的

我们要做的就是确定好我们当前屏幕设备的html字体大小就行了

vscode插件cssrem可以把px转为rem,此插件默认的html字体大小为16需要改一下，比如改为750/10=75

响应式布局

响应式开发原理：就是根据媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的

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