移动端Web
移动端
- 兼容移动端主流浏览器,处理Webkit内核浏览器即可.
- 我们现状开发的移动端主要针对手机端开发
- 现在移动端碎片化严重,分辨率和屏幕尺寸大小不一
- 学会用谷歌浏览器模拟手机界面及调试
视口 viewport
布局视口 layout viewpor
- 早期用于解决pc端网页在手机上显示的问题
- 但是移动端将pc端的视口分辨率设置为980px,相对手机屏幕看上去很小.
视觉视口 visual viewport
- 用户用手机屏幕查看pc端原本网页大小只能显示一小块手机屏幕尺寸大的区域.
理想视口 ideal viewport
- 为了使网站在移动端有最理想的阅读宽度设定的
- 需要手动添加meta视口标签通知浏览器操作
- meta视口标签用作让布局的视口和设备的宽度同步.
meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scala=1.0, maximum=1.0, minimum-scale=1.0">
- width 宽度是设置viewport的宽度 一般设置和设备宽度一样,还可以设置devic-width的特殊值.
- initial-scale 初始缩放比例,大于0的数字
- maximum-scale 最大缩放比例, 大于0的数字
- minimum-scale 最小缩放比例, 大于0的数字
- user-scalable 用户是否可以缩放 yes或no
物理像素和物理像素比
- PC端页面 一个px等于一个物理像素,但是在不同的手机上显示出的px大小却不同,他们之间的比例称为物理像素比.
- 开发的时候要注意不同的手机的开发尺寸
二倍图
- 因为手机有个视网膜技术可以将更多的物理元素压缩,从而达到更高的分辨率,以提高显示的细腻程度.
- 对于pc端的图片来说,在手机端打开PC端的图片会按照物理像素比放大倍数,从而造成图片模糊
- 解决方案:在pc端将图片压缩2倍(手机端会放大的物理像素比),再在手机端上显示就不会变模糊了
css3 盒子模型 box-sizing
- 传统盒子模型: 盒子宽度=宽高+border+padding
- box-sizing:border-box; 盒子宽度=设置的宽高(里面包含了border和padding)
- 移动端可以全部使用css3盒子模型
- pc端需要兼容就用传统模式,不考虑兼容就选择css3盒子模型
移动端上的特殊样式
- 移动端的链接自带点击高亮,我们需要清除
- a {-webkit-tap-highlight-color:transparent;}
- 移动端浏览器的按钮会有自带的样式也要去掉
- input {-webkit-appearance:none;}
- 禁用长安页面时的弹出菜单
- img,a {-webkit-touch-callout:none;}
移动端页面项目准备
-
流式布局/弹性布局
-
搭建相关文件夹结构css images upload
-
引入视口标签及css初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scala=1.0, maximum=1.0, minimum-scale=1.0"> -
body 常用初始化样式
body { max-width: 540px; min-width: 320px; margin: 0 auto; font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei; color: #000; background: #f2f2f2; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
-
-
rem适配布局
-
搭建相关文件夹结构css images upload (less文件放入css文件夹)
-
放入视口标签及css初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scala=1.0, maximum=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/normalize.css"> -
设置公共common.less文件
- 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小,其他页面也需要.(数值从小到大写)
- 常见的屏幕尺寸:320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
- 因为pc端也可以打开,默认的html字体大小为50px;(写在最上面)
- 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小,其他页面也需要.(数值从小到大写)
-
新建index.less文件
- 写首页的样式
- 将conmmon.less引入到index.less 语法:@import “common.less” ; (import可以把一个样式文件导入到另一个样式文件里面
-
body 常用初始化样式
- width写死:最大屏幕尺寸 / html字体大小 (单位用rem)
body { min-width: 320px; width: 15rem; margin: 0 auto!important; // line-height: 1.5; height: 1000rem / @baseFont; } @import "common.less";
-
-
rem适配方案2 (flexible.js+rem)
-
搭建相关文件夹结构css images upload js
-
放入视口标签及css和js初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scala=1.0, maximum=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/normalize.css"> <script src="js/flexible.js"> </script> -
body常用初始化样式
body { min-width: 320px; max-width: 750px; /* flexible 给我们划分了 10 等份 */ width: 10rem; margin: 0 auto; line-height: 1.5; font-family: Arial, Helvetica; background: #f2f2f2; }
-
移动端常见布局
流式布局(百分比布局)
- 通过盒子的宽度设置百分比来根据屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧填充.
- 但是无限伸缩会影响其他布局,所以最好设置一个最大和最小宽度
- max-width:最大宽度 (max-height 最大高度)
- min-width:最小宽度 (min-height 最小高度 )
flex弹性布局
- 操作方便,布局简单,移动端应用广泛,PC端浏览器支持情况较差 IE11等低版本不支持
- PC端还是建议传统布局
- 不考虑兼容性问题,我们还是使用flex弹性布局
- 当我们为父盒子设为flex布局后,子元素的float,clear和vertical-align属性将失效
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
- 父盒子称为flex父容器,子元素称为flex项目
- 子元素可以横向排列和纵向排列
display:flex; 给父盒子设置flex布局
- flex-direction:row(行); 主轴排列方式 默认从左往右
- row-reverse(翻转); 从右到左
- column(列); 从上到下
- column-reverse; 从下到上
- flex-direction:row设置的为主轴 另一个为侧轴
- justify-content 设置主轴上子元素的排列方式
- flex-start 从头到尾(默认)
- flex-end 从尾部开始排列
- center 主轴居中对齐
- space-around 平分剩余空隙空间(相当于剩余空间平分给每个子元素一个margin值)
- space-between 第一和最后一个子元素贴边,再平分剩余空间
- flex-wrap 设置子元素是否换行 如果装不开会缩小子元素,还是放已在一行
- nowrap; 不换行(默认)
- warp; 换行
- align-items 设置侧轴上子元素的排列方式(单行)
- flex-start 主轴初始位置
- flex-end 主轴另一侧尾部
- center 侧轴挤在一起居中
- stretch 拉伸 (默认值)
- alingn-content 设置侧轴上子元素的排列方式(多行)
- flex-start 主轴初始位置
- flex-end 主轴另一侧尾部
- center 侧轴挤在一起居中
- stretch 设置子元素高度平分父元素高度
- space-around 子项在侧轴平分剩余空间
- space-between 子项在侧抽先分布在两头,再平分剩余空间
- flex-flow:row wrap; 主轴方向和是否换行(换列) 简写
- flex-direction 和flex-warp连写
flex布局子元素常见属性
- flex:1; 子元素占的份数(比例)
- 值取正整数,定义子元素分配剩余空间
- 还可以取百分比! 相当于父级来说
- align-self 控制某一个子项在侧轴的排列方式
- 值 同align-items一样
- order: -1; 控制某一个子项的排列顺序
- 数值越小,排列越靠前,默认为0
rem适配布局
-
通过修改html的font-size 来调整页面元素中的大小.
-
rem(root em) 是相对单位, 基准是相对于html元素的字体大小.
- 根元素(html) 设置font-size=12px;非根元素设置width:2rem; 相当于24px; (12x2)
- em则是相对于父元素的字体大小来表示子元素的px值.
-
媒体查询 (设置屏幕不同尺寸时发生的变化)
- @media screen and (min-width:320px) and (max-width:640px) {选择器{属性:值;} }
- 查询类型: screen 用于电脑屏幕 手机等 all 用于所有设备 print 用于打印机和打印预览
- 关键字: and 将多个多媒体特性连在一起 not 排除某个多媒体类型(可以省略) noly 指定某个多媒体类型(可以省略)
- 媒体特性: width可见区域宽度 min-width 最小可见宽 max-width 最大可见宽
- @media screen and (min-width:320px) and (max-width:640px) {选择器{属性:值;} }
-
引入资源 (了解)
- 当样式比较复杂时,我们可以针对不同的媒体使用不同的stylesheet样式表.
- 原理是通过link判断设备的尺寸,然后引用不同的css文件
-
Less(css扩展语言,css预处理器)
- 在css基础上 引入了变量,运算及函数等功能.
- 常见css预处理器 Sass Less Stylus
- 创建 .less文件转换为 .css文件引入html才能使用(运用插件)
- Less变量 @变量名:值;
- 让属性值=@变量名即可生效, color=@red;
- 必须有@前缀 , 不能包含特殊字符 , 不能以数字开头 , 区分大小写
- Less 编译
- vocode Less 插件 里的 Easy Less插件用来把less文件编译为css文件
- 保存了less文件就会自动生成css文件,非常好用!
- Less 嵌套
- 子元素的样式直接写到父元素里即可
- 如果有伪类 交集 伪元素 选择器 我们的内层选择器的前面需要加&号(例: &:hover)
- Less 运算
- 任何数字.颜色 变量都可以加减乘除运算 (+) (-) (*) (/) 左右必须以空格隔开
- width:200px - 50; 只有一个值有单位,结果取该单位
- width80rem /50px; 两个值有不同单位,结果取第一个值的单位
- width(200px + 50px) * 2 ; 先加减再乘除,可以用小括号包起来
-
rem+媒体查询+Less=rem布局(适配布局) 等比例缩放!
- 首先选一套屏幕标准尺寸
- 屏幕尺寸 / 划分的份数 =html的font-size (不同的屏幕尺寸的html文字大小不同,因为要除以同样的份数才能达到等比例缩放的效果)
- 页面元素的rem值= 页面元素的px值 / html的文字大小
Bootstrap(框架)响应式布局
- 提供了标准化的html+css编码规范
- 提供了一套简介,直观,强悍的组件,并且会不断更新迭代
-
创建Bootstrap文件夹,放入下载好的Bootstrap内的文件
-
创建html骨骼框架
解决ie9以下浏览器对新增标签不知别和对css3媒体查询不识别的问题 <!--[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里的css文件)
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -
书写内容
-
通过修改标签的类名可实现不同的样式来使用bootstrap
-
还可以在bootstrap原来的样式上 继续修改
-
查询bootstrap样式需要外网查询
-
若是效果图采取大于1170px的宽度, 我们将需要用媒体查询修改container的宽度(Bootstrap 里 container宽度 最大为 1170px)
@media screen and (min-width: 1280px) { .container { width: 1280px; } }
-
-
div.contarnei 容器(响应式)
- 响应式布局的容器 固定宽度
- 大屏>=1200px 固定为1170px
- 中屏>=992px 宽度为970px
- 小屏>=768px 宽度为750px
- 超小屏(100%)
-
div.container-fluid类(流式布局容器)
- 百分百宽度 适合单独做移动端开发 占据全部视口的容器
-
栅格系统(系统自动分为最低配12列)
- 通过一系列的row行与column列的组合来布局,row必须放在丛台内里面.
- 要实现列的平均划分 需要给列添加类前缀,类前缀后面填需要划分的份额
- .col-xs-12 超小屏<768px 100%
- .col-sm-6 小屏>=768px 750px
- .col-md-6 中屏>=992px 970px
- .col-lg-6 大屏>=1200px 1170px
- 列大小12 多余的另起一行
- 每一列默认有左右15的padding, 子元素加一个row可以去掉这个padding 值
- 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”
- 列嵌套
- 每个列还可以划分12份,里面继续放入列.
- 列偏移
- .col-md-offset-*
- 可以给需要偏移的盒子向左偏移上多少列份额的距离(效果是给盒子添加了一个左margin值)
- 列排序(可以让同行的盒子向两侧平移移动达到排序的目的)
- .col-md-pull-* 向左平移多少份的距离
- .col-md-push-* 向右平移多少份的距离
-
bootstrap响应式工具 (利用媒体查询功能,展示或隐藏某些模块)
- .hidden-xs 隐藏超小屏 其他屏可见 .visible-xs 超小屏可见 其他隐藏
- hidden-sm 隐藏小屏 其他屏可见 .visible-sm 小屏可见 其他隐藏
- hidden-md 隐藏中屏 其他屏可见 .visible-md 中屏可见 其他隐藏
- hidden-lg 隐藏大屏 其他屏可见 .visible-lg 大屏可见 其他隐藏
2474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
