css移动端开发
移动端浏览器主要对webkit内核兼容,现在的移动端主要针对手机端开发,移动端碎片化比较严重,分辨率和屏幕尺寸不一
调试方法
- 谷歌浏览器模拟手机调试
- 搭建本地web服务器,手机和服务器在同一个局域网内,通过手机访问服务器
- 使用外网服务器,直接IP或域名访问
视口
视口就是浏览器显示页面内容的屏幕区域。视口可以分布为布局视口、视觉视口和理想视口
布局视口layout viewport
- 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题
- IOS、Android都把视口分辨率设置为980px,所以pc端上的页面大多都能在手机上呈现,只不过元素看起来很小,一般只能手动缩放页面
视觉视口 visual viewport
用户正在看到的网站的区域,可以通过缩放操作视觉视口,但是不会影响布局视口,布局视口仍然保持原来的宽度
理想视口 ideal viewport
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口,对设备来讲,是最理想的视口尺寸
- 需要手写meta视口标签来通知浏览器操作
- meta视口标签的目的:布局视口的宽度和理想视口的宽度保持一致,就是设备有多宽,布局的视口就有多宽
meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
width viewport宽度,可以设置device-width特殊值
initial-scale 初始缩放比,大于0的数字
maximum-scale 最大缩放比,大于0的数字
minimum-scale 最小缩放比,大于0的数字
user-scalable 用户是否可以缩放,yes或no
视口宽度和设备一致、默认缩放比1:0,不允许用户自行缩放、最大允许缩放比1.0,最小允许缩放比1.0
二倍图
物理像素&物理像素比
物理像素点指屏幕显示的最小颗粒,1px在PC端等于1物理像素,但是移动端不一定,一个1px能显示多少物理像素点成为屏幕像素比
- 视网膜屏幕是一种显示技术,把更多物理像素点压缩至一块屏幕内,从而达到更多分辨率
多倍图
图片在手机中打开,会按照物理像素比放大,出现模糊现象,因此用倍图的方式(放二倍大小的图片再缩小到需要的大小)
背景缩放
- background-size
- 规定背景图像尺寸,两个参数为高度,宽度,只写一个参数就是指宽度,等比例缩放
- 单位可以是百分比,是相对父盒子的百分比
- cover:等比例缩放,要求完全覆盖盒子 ,可能有部分背景图片显示不全
- contain: 等比例缩放,尽量铺满不会超出,可能会有空白
移动端开发选择
单独制作移动端页面(主流)
响应式页面兼容移动端
移动端技术解决方案
移动端初始化nomalize.css
http://necolas.github.io/normalize.css/
CSS3盒子模型box-sizing
boxing-size:border-box;(传统是content-box)
padding和border不会再撑大盒子
移动端可以完全兼容CSS3
特殊样式
-webkit-tap-highlight-color: transparent;//清除高亮
-webkit-appearance: none;//在ios上加上这个属性才可以给按钮和输入框自定义样式
img,a{-webkit-touch-callout:none}//禁止长按页面时弹出菜单
二倍精灵图
background-size缩放的是整个精灵图
- 在firework里把精灵图等比例缩放为原来的一半
- 根据大小测量坐标
- 代码里的bgcsize也要缩放
移动端常见布局
主要包括流式布局、flex布局、rem布局
流式布局
百分比布局,非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕伸缩
- 需要设定最大值最小值,防止影响内容显示max-width: min-width
flex布局
- 传统布局兼容性好,但是布局繁琐,局限性高
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
- flex布局在PC端支持较差,移动端应用广泛
- 采用flex布局的元素称为flex容器,所有子元素自动成为容器成员,成为flex项目,简称项目
布局原理
- 任何一个容器都可以使用flex布局
- 父盒子设为flex布局后,子元素的float、clear、和vertical-align属性失效
- 原理:通过给父盒子添加flex属性,控制子盒子的位置和排列方式
flex父项常见属性
- flex-direction:设置主轴的方向,默认是row,元素是跟着主轴排列的,设为column,则主轴变为y轴,实现从上到下排列
- justify-content: 设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-content:设置侧轴上子元素的排列方式(多行),只能用于出现换行的情况
- align-items: 设置侧轴上的子元素排列方式(单行)
- flex-flow: 复合属性,同时设置direction和wrap
主轴是x轴方向,水平向右;侧轴是y轴方向,垂直向下
justify-content:一定要确定好主轴
- flex-start 靠左对齐
- flex-end 靠右对齐
- center: 子元素居中对齐
- space-around:平分剩余空间(每个盒子都有左右边距)
- space-between:先两边贴边再分配剩余空间
flex-wrap:
默认不换行,当多个子盒子装不进去父盒子的时候,会强制放在一行,缩小子盒子
- warp:允许换行
align-items:
- center:侧轴居中(侧轴为y时垂直居中)
- flex-start: 贴着侧轴上沿
- flex-end :贴着侧轴下沿
- stretch :拉伸,必须子盒子没有高度,会拉伸到和父盒子一样高(margin不影响)
align-contents:
比items多space-around、space-between两个值,可以实现平分空间,在单行下没有效果
flex-flow:
是flex-direction和flex-wrap属性的复合属性
flex-flow: row wrap;
flex子项常见属性
- flex:定义子项目分配剩余空间,用flex表示子项目占的份数
可用于布局两边固定盒子,中间盒子长度可随屏幕大小调整的情况(自适应) //圣杯布局
- align-self:控制子项自己在侧轴上的排列方式
允许某个项目有与其他项目不同的排列方式,可覆盖align-items属性,默认值为auto,相当于继承align-items属性,如果没有父元素则等同于stretch
- order:属性定义项目的排列顺序,移动的是左右排列,与z-index不同
数值小的靠前排列
rem布局
rem单位
root em相对单位,em是父元素字体大小
rem是相对于html元素的字体大小
优点:可以通过修改html里面的文字大小来改变页面中元素的大小,可以整体控制
媒体查询
媒体查询是CSS3新语法
- 可以针对不同屏幕尺寸设置不同样式
@media mediatype and|not|only (media feature){
}
@media screen and (min-width:500px){
body{
background-color:red
}
}
mediatype:媒体类型
all:用于所有设备
print:用于打印机和打印预览
screen:用于电脑屏幕
媒体特性
width:定义
max-width:800 只有宽度小于800时,才执行下面样式
- screen还有and必须带上
- 必须带单位px
- 媒体查询+rem可以实现不同设备里尺寸动态变化,给html设定font-size,然后设置字体行高(rem单位)等随宽度变化
引入资源
三星:大屏和小屏使用两个css文件,直接在link中判断设备的尺寸,然后引入不同的css文件
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)"
适配方案原理
- 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
- 使用媒体查询根据不同设备按比例设置html字体大小,然后页面元素使用rem作为尺寸单位,当HTML字体大小变化元素尺寸也会变化,从而达到等比缩放的适配
技术方案1
less、媒体查询、rem
一般情况以一套或者两套效果图适应大部分屏幕,基本以750px宽度为准
假设设计稿是750px,把屏幕化为15等份(标准不一定是15),每一份作为html字体大小,这里为750/15=50px,那么在320px设备时,字体大小为320/15=21.33px,比例相同,本质是实现等比例缩放
-
页面元素的rem值=页面元素值(px)/(屏幕宽度/划分份数)
-
屏幕宽度/划分份数就是HTML font-size的大小
技术方案2(更推荐)
flexible.js 、rem
两种方案都存在,方案2更简单
淘宝团队出品,在js里处理,不需要写不同屏幕的媒体查询,原理是将当前设备划分为10等份,我们只需要把html文字大小设置为75px,里面页面元素rem值=页面px值/75
插件:cssrem自动转换rem 在插件扩展设置里调整字体大小基准值为45
响应式布局
响应式开发原理
利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的
超小屏幕(手机)<768 宽度设置为100%
小屏设备(平板) >=768~<992 宽度设置为750
中等屏幕(桌面显示器) >=992~<1200 宽度设置为970px
宽屏设备(大桌面显示器)>1200 宽度设置为1170px
需要一个父级作为布局容器,在不同屏幕下,通过媒体查询改变这个布局容器排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式
Bootstrap
基于HTML、CSS和JAVASCRIPT,使web开发更加快捷
版本3.xx放弃了IE6-7,偏向于开发响应式布局、移动设备优先的WEB项目
入门文档:https://bootstrap.css88.com/getting-started/#download
- 创建HTML骨架文件
在head里meta后添加
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
- 引入bootstrap样式文件
- 书写内容
可以在原来的基础上更改,添加类名,要注意权重
布局容器
bootstrap使用container类定义好了响应式布局的容器大小;只需要div.container 内容写在里面即可;适合做响应式
container-fluid 类 流式布局容器;占据全部视口的容器,适合做单独的移动端页面
栅格系统
说明 https://bootstrap.css88.com/css/#grid
将页面布局划分成等宽的列
- 不管屏幕有多宽,统一划分为12列(把container划分为12列
例如类col-lg-3表示占3列(大桌面设备)
- 如果孩子份数相加等于12,则孩子能占满整个container;小于12则会有空白;大于12则会换行
col-md-4 表示中等屏幕下占4列
-
可以多个类名同时,便于实现响应式
-
每一列默认有个15pxpadding值
列嵌套
为了使用内置的栅格将内容嵌套,通过添加一个新的.row
和一系列.col-md-*
列到已经存在的.col-md-*
列内即可实现。嵌套row所包含的列加起来应该等于12。
加row可以取消padding值并且和父亲一样高
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
列偏移
使用.col-md-offset-*
可以将列偏移到右侧。这些class通过使用*
选择器将所有列增加了列的左侧margin。例如,.col-md-offset-4
将.col-md-4
向右移动了4个列的宽度。
可以计算实现右对齐、居中等
列排序
通过使用.col-md-push-*
和 .col-md-pull-*
就可以很容易的改变列的顺序。
响应式工具
可以实现在不同屏幕下的显示(visible)或隐藏(hidden)