学习回顾No.6

发布时间:2024年01月16日

移动WEB开发

视口(viewport)

  1. 布局视口
  2. 视觉视口
  3. 理想视口

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宽度
  • initial-scale => 初始缩放比
  • maximum-scale => 最大
  • minimum-scale => 最小
  • user-scalable => 用户是否可缩放,yes或no(1或0)

物理像素&物理像素比

  • Retina(视网膜屏幕) 使移动端和PC端像素不一一对应
  • 多倍图 => 先放大再缩小

背景图片缩放

  • background-size:width,height;(写%,相对父盒子)/cover/contain

单独制作移动端页面(主流) 响应式页面(其次)

移动端CSS初始化推荐使用normalize.css

http://necolas.github.io/normalize.css/

设置box-sizing

  • border-box => padding和border不会撑大盒子了
  • content-box => 传统模型

清除高亮

  • -webkit-tap-highlight-color:transparent;

ios去掉外观

  • -webkit-appearance:none;

禁用长按页面时的弹出菜单

  • img,a{-webkit-touch-callout:none;}

单独制作移动端页面(主流)

  • 流式布局(百分比布局)
  • flex弹性布局(强烈推荐)
  • less+rem+媒体查询布局
  • 混合布局

响应式页面兼容移动端(其次)

  • 媒体查询
  • bootstarp

流式布局(百分比布局)

  • 非固定像素布局
  • max-width(max-height)
  • min-width(min-height)

二倍精灵图做法

  • 在firework中缩放到一半
  • 测坐标
  • background-size:原来一半宽度

传统布局

  1. 兼容性好
  2. 布局繁琐
  3. 局限性,不能在移动端很好布局

flex弹性布局

  1. 操作方便,布局极为简单,移动端应用很广泛
  2. PC端浏览器支持情况较差
  3. IE11或更低版本,不支持或部分支持
  4. 为父盒子设为flex布局后,子元素的float、clear和vertical-align失效
  5. 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

父项属性

  • flex-direction => 主轴方向

  • justify-content => 主轴上子元素排列方式(一定确定主轴)

  • flex-wrap => 子元素是否换行

  • align-content => 侧轴上的子元素排列方式(多行)

  • align-items => 侧轴上的子元素排列方式(单行)

  • flex-flow => 复合属性,同时设置flex-direction和flex-wrap

  • flex-direction:row(左->右)/row-reverse(右->左)/column(上->下)/column-reverse(下->上)

  • justify-content:flex-start/flex-end/center/space-around/space-between

  • flex-wrap:nowrap(默认)/wrap

  • align-items:flex-start/flex-end/center/stretch(拉伸)

  • align-content:flex-start/flex-end/center/space-around/space-between/stretch

  • flex-flow:row wrap;(同时设置flex-direction flex-wrap)

2D转换之移动translate(不会影响其他元素的位置) 行内块无效

  • transform:translate(X,Y) / translateX(n) / translateY(n) 可用百分比(相对自身)

2D转换之旋转rotate

  • transform:rotate(度数) 45deg 正为顺时针,负为逆时针

2D转换中心点transform-origin

  • transform-origin:X Y; (百分比、像素、方位名词)

2D转换之缩放scale(不影响其他盒子)

  • transform:scale(x,y); (纯数字,无单位)

2D转换综合写法

  • transform:translate() rotate() scale()等

用keyframes定义动画

@keyframes 动画名称{from/0%{width:100px;} to/100%{width:200px;}}

使用

  • animation-name => 动画名称
  • animation-duration:ns => 持续时间
  • animation-delay => 何时开始
  • animation-iteration-count:infinite => 播放次数
  • animation-fill-mode:forwards 保持 backwards 回到起始
  • animation-play-state:running/paused
  • animation-timing-function:规定速度曲线
  • animation-direction:normal/alternate 逆播放

动画简写

  • animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
  • animation-timing-function:steps(5); => 分几步来完成动画
  • white-space:nowrap => 强制一行显示

3D转换

  • 近大远小
  • 物体后面遮挡不可见

三维坐标系

  • X右为正,左为负
  • Y下为正,上为负
  • Z往外为正,往里为负
  • 3D位移:translate3d(x,y,z)
  • 3D旋转:rotate3d(x,y,z) rotateX(45deg)/rotateY(45deg)/rotateZ(45deg)/rotate3d(1,1,0,45deg)
  • 透视:perspective
  • 3D呈现:transform-style
  • 透视写在被观察元素的父盒子上面的(加单位px)
  • Z值越大物体越大
  • transform-style:flat 子元素不开启3d立体空间(默认)/ preserve-3d 开启3d立体空间
  • 代码写在父级,但影响的是子盒子

浏览器私有前缀

  • -moz- => firefox浏览器
  • -ms- => ie浏览器
  • -webkit- => safari、chrome浏览器
  • -o- => opera私有

子项属性

  • flex子项目占的份数
  • align-self控制子项自己在侧轴的排列方式
  • order属性定义子项排列顺序(前后顺序)
  • .item{flex:<number>;/*default:0*/}
  • align-self:flex-end;
  • order:-1 => 数值越小排列越靠前,默认为0

背景颜色渐变(必须添加前缀)

background:-webkit-linear-gradient(起始方向,颜色1,颜色2,...)

rem(root em)

  • em相对于父元素的字体大小
  • rem相对于html元素的字体大小

媒体查询(Media Query)是CSS3的新语法

  • @media可以针对不同的屏幕尺寸设置不同的样式
  • @media mediatype and/not/only (media feature){css-code;}
  • 引入资源 <link rel="stylesheeet" media="mediatype and/not/only (media feature)" href="mystylesheet.css">
  • Less(Leaner Style Sheets)是一门CSS扩展语言,也成为CSS预处理器
  • 常见的css预处理器:Sass、Less、Stylus
  • Less变量 => @变量名:值;
  • less嵌套 => 子元素样式直接写到父元素里
  • 伪类、交集选择器、伪元素选择器 内层选择器前面需要加&
  • Less运算 => 以第一个值的单位为准

rem适配方案技术使用

  • 技术方案1 => less 媒体查询 rem

  • 技术方案2(推荐) => flexible.js rem

  • 页面元素的rem值=页面元素在750像素下px值/html里的文字大小

  • @import可把一个样式文件导入到另一个样式文件里

  • link把一个样式文件引入到html页面里

  • px转换rem插件:cssrem

  • js文件放入body里是为了确保html结构渲染成功

  • swiper插件使用

  • 地址:https://www.swiper.com.cn/

  1. 下载需要的css和js文件
  2. 官网找到类似案例,复制html结构、css样式、js语法
  3. 根据需求定制修改模块
  • 蓝湖/慕客协作平台
  • 慕客官网:https://www.mockplus.cn/
  • PS安装插件

移动web开发响应式布局

  • Bootstrap来自twitter前端框架
  • 中文官网:http://www.bootcss.com/
  • 官网:http://getbootstrap.com/
  • 推荐使用:http://bootstrap.css88.com/
  • 使用四步曲:1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容
  • 条件注释只有IE浏览器能识别,其他浏览器会忽视掉
  • 优点
  1. 标准化的html+css编码规范
  2. 提供一套简洁、直观、强悍的组件
  3. 有自己的生态圈,不断更新迭代
  4. 让开发更简单,提高开发效率

布局容器

  1. container类
  • 响应式布局容器,固定宽度
  • 大屏(>=1200px) 定为1170px
  • 中屏(>=992px) 定为970px
  • 小屏(>=768px) 定为750px
  • 超小屏(100%)
  1. container-fluid类
  • 流式布局容器 100%宽度
  • 占据全部视口的容器
  • 适合于单独做移动端开发

栅格系统(grid systems) 网格系统

  • 响应式、移动设备优先,随着屏幕或视口尺寸增加,系统会自动分为最多12列
  • 类前缀:.col-xs-、.col-sm-、.col-md-、.col-lg-
  • xs-extra small:超小 sm-small:小 md-medium:中等 lg-large:大
  • 每一列默认有左右15px的padding
  • 可同时为一列指定多个类名:class=“col-md-4 col-sm-6”
  • 列嵌套 => 加1个行row这样可以取消父元素的padding值,而且高度自动和父级一样高
  • 列偏移 => 使用.col-md-offset-n类使列向右偏移n份,实际上为当前元素加了左侧margin
  • 列排序 => 使用.col-md-push-n(左侧)和.col-md-pull-n(右侧)来改变列的顺序
  • 隐藏:.hidden-xs(sm,md,lg)
  • 显示:.visble-xs(sm,md,lg)

移动端布局

  1. 流式布局(百分比布局)
  2. flex弹性布局(推荐)
  3. rem适配布局(推荐)
  4. 响应式布局

rem(常见)

  1. 需要不断修改html文字大小
  2. 需要媒体查询media
  3. 需要flexible.js

vw/vh

  1. 省去各种判断和修改
  2. 代表:b站
  • vw/vh是一个相对单位(类似em和rem相对单位)
  • vw是viewport width 视口宽度单位
  • vh是viewport height 视口高度单位
  • 1vw = 1/100 视口宽度
  • 1vh = 1/100 视口高度
  • 和百分比有区别的,百分比是相对于父元素的,而vw和vh总是针对当前视口来说的
  • 开发中使用vw,需要像素大厨把模式改为2x模式
  • 还原设计稿 确定设计稿视口宽度 直接使用测量数值/(视口宽度/100)
  • 因为涉及到大量除法,适应less更好
  • 开发中使用vw基本够用,vh很少使用
  • 兼容性:网站:https://caniuse.com/
文章来源:https://blog.csdn.net/weixin_54365125/article/details/135524834
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。