移动web开发入门

最新推荐文章于 2024-07-11 13:45:07 发布

脱发不是梦

最新推荐文章于 2024-07-11 13:45:07 发布

阅读量380

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_45801225/article/details/124331689

版权

视口 viewport

获取屏幕宽度
document.documentElement.clientWidth
document.documentElement.getBoundingClientRect().width
window.innerWidth

获取设备比 devicePixelRatio
window.devicePixelRatio

box-sizing
pc 多用 :box-sizing:concent-box; 默认外扩
移动端多用： box-sizing:boder-box; 内缩宽高内部不改宽高

图标字体
优点：矢量图放大不失真，体积小方便。只有小图标可以
1.设计定制
2.iconfont阿里巴巴矢量图标库
下载到项目，解压到文件中 4个字体文件兼容不同浏览器
引入 fonts link文件 css @font-face()
.iconfont{
font-family:“iconfont !important !”;
}

在类中使用 <iclass=“iconfont icon-scan” >

flex 布局《重点》

1、flex ：flexible box ：弹性布局。
2、采用flex布局的元素，称为flex容器。 .box{ display: flex | inline-flex; }
3、flex 容器的所有子元素自动成为容器成员，称为flex项目。项目默认沿着主轴排列
在这里插入图片描述

display属性

display:flex; 宽度默认100%

display:inline-flex; 由里面内容撑开

flex-direction 属性

决定主轴方向（即项目的排列方向）
flex-direction:row (**默认**)      水平方向   起点在左端1234
                    | row-reverse   水平方向 起点在右端 4321
                    |column  主轴为垂直方向  起点在上沿  
                    | column- reverse  主轴为垂直方向  起点在下沿

flex-wrap 属性

  在轴线排不下 ，是否换行
flex-wrap: nowrap **默认** 不换行
                wrap  换行 第一行在上方
                wrap-reverse 换行 第一行在下方

flex-flow 简写属性

flex-direction 和 flex-wrap 的简写形式，**默认值为  row nowrap**
flex-flow : <flex-direction> ||  <flex-wrap>;

布局中重点属性
justify-content属性

定义项目在主轴上的对齐方式，
justify-content：flex-start   **默认值** 左对齐
 						  flex-end     右对齐
 						  center        居中
 						  space-between  两端对齐
 						  space-around    项目两侧将间隔相等  项目之间的间隔比之两边之间的大一倍

align-items 属性

定义项目在交叉轴上如何对齐.垂直方向上
align-items:flex-start  交叉轴的起点对齐 上
                  flex-end   交叉轴的终点对齐  下
                  center    交叉轴中点对齐  垂直居中
                  baseline    下划线对齐
                  stretch      **默认值**  如果在项目中未设置高度或者是auto 将占满整个容器的高度

align-content属性

定义多根轴线 (多行） 交叉轴上的对齐方式  上下
 如果该项目只有一根轴线（一行） 该属性不起作用
 align-content：flex-start  交叉轴的起点对齐  整体  flex-wrap 合用  多行 
                         flex-end   交叉轴的终点对齐
                         center  交叉轴中点对齐
                         space-between  交叉轴的两端对齐
                         space-around   交叉轴的 两侧间隔相等 项目之间间隔两边大一倍
                         stretch  **默认** 在项目中 占满整个容器

项目上的属性
1、 order 属性

属性定义项目的排列顺序  :数值越小 排列越靠前  默认为0  
 order : <integer>;

2、flex-grow 属性

 属性定义项目的放大比例，默认为0 即如果存在剩余空间，也不放大.

如果所有项目的 flex-grow 属性都为1 则它们将等分 剩余空间（如果有的话）
如果一个项目的flex-grow  属性为2  其他项目 都为1 则前者 占据的剩余空间将比其他项多一倍.

flex-grow:; default:0;

如果项目有flex-grow属性  有的项目有width属性 有flex-grow 属性的项目将 等分剩余空间.

3、flex-shrink 属性
flex-shrink 属性定义了项目的缩小比例，默认为1 即如果空间不足该项目将缩小

如果所有项目的flex-shrink 属性都为 1 当空间不足时都将等分比例缩小
如果一个项目的flex-shrink 属性为0 其他项目都为1 则空间不足时前者不缩小负值对该属性无效。

flex-shrink:; default:1;

4、flex-basis 属性

在分配多余空间之前，项目占据的主轴空间（main size)
浏览器根据这个属性计算主轴是否有多余的空间它的默认值为 auto 即项目的本来大小.

flex-basis:; auto default : auto
flex-basis:400px; 比width优先级高
5、flex 属性
flex: flex-grow .flex-shrink ,flex-basis 的简写默认值为：0 1 auto 后两个属性可选

两个快捷键：auto(1 1 auto) none （0 0 auto)
flex:1;平分

flex:none; |[ ? || ]

6、align-self 属性
允许单个项目与其他项目不一样的对齐方式，可覆盖align-items 属性
默认值为 auto,表示继承父元素的align-items 属性如果没有父元素则等同于stretch

媒体查询

@media screen and (min-width:900px) 大于等于900 即为ture

媒体类型： all（defult) 所有最多使用
screen 屏幕
print 打印
speech 屏幕阅读器
and 与 or 或 not 非
@media all (min-width:900px)
@media print and (min-width:900px)

   逗号代表逗号前是整体，后面没有媒体类型说明默认为all  都好自成一体
   @media screen and (min-width:900px) , (max-width:9000px) 
    not   and  and  取整体取反
    @media  not  screen  and (min-width:900px) 
    
    媒体特征表达式 ：width |max-width |min-width | device-width | device-height | 
                                 min-pixel-ratio | max-pixel-ratio | oriention (landscape | portrait) | device-pixel-ratio |max-pixel-ratio 
                                 了解：screen.width |screen.height |aspect-ratio 视口宽高比  很少使用

媒体查询–策略（比较好的写法）
写断点 3-4 个 bootstrap
xs:< 576 px 手机
sm: 576px ~ 768px
md: 768px ~ 992px 平板
lg : 992px ~1200px
xl: > 1200px 大屏

断点如何来的：可以更改根据你的界面来设置
@media (max-width:576px){
//超小屏
.col{
width:100%;
}
}

@media (min-width:576px) and (max-width:768px){
//小屏
.col{
width:50%;
}
}

@media (min-width:769px) and (max-width:992px){
//平板
.col{
width:25%;
}
}

@media (min-width:993px) and (max-width:1200px){
//大屏
.col{
width:16.666667%;
}
}

@media (min-width: 1201px){
//超大屏
.col{
width:8.3333333%;
}
}

pc first
利用顺序简写
.col{
width:8.3333333%;
}
@media (max-width: 1200px){
//超大屏
.col{
width:16.66667%；
}
}
@media (max-width: 992px){
.col{
width:25%；
}
}

@media (max-width: 768px){
.col{
width:50%；
}
}

@media (max-width: 576px){
.col{
width:100%;
}
}

mobile first
先考虑移动优先比较好的做法
.col{
width:100%;
}
@media (min-width: 576px){

.col{
width:50%；
}
}
@media (min-width: 768px){
.col{
width:25%；
}
}

@media (min-width: 992px){
.col{
width:16.66667%；
}
}

@media (min-width: 1200px){
.col{
width:8.333333%;
}
}

移动端常用单位
px 像素
% 百分比自适应
em font-size-element chrome 字体最小 12px 移动端会起作用根据自身的发小来变化 px * em | em* em (去父元素找px)
text-indent:2em 主要用于缩进两字符比较好字体布局用不太好
rem 非常好 root(html) element 统一到 html的font-size 移动端
vw 视口宽 100 = 100%
vh 视口高 100 =100%

视口宽度 = document.documentElement.clientWidth

height = (document.documentElement.clientWidth/750) * 100px;

统一修改：
375 px -> 1rem =20px;
height = 50/20 =2.5 rem;

视口宽：1rem = (document.documentElement.clientwidth / 375) * 20px;

<script>
//动态设置 html 的font-size 响应式布局中调整 界面宽高大小
   setRemUnit();
   window.onresize =  setRemUnit;
function  setRemUnit(){
	var docEl = document.documentElement;
	var viewWidth = docment.clientWidth;
	document.style.fontSize = viewWidth / 375 * 20 + 'px';\
}   

</script>

响应式布局

在这里插入图片描述

一个网站兼容多种终端，对不同尺寸大小做出响应，并进行相应布局的一种移动web开发方式。
响应式布局的原理：
1、利用媒体查询设置断点，一般情况下
extra small <576px
small >= 576px
medium >=768px
large >= 992px
extra large >= 1200px

什么是栅格系统？
是响应式布局的一种实现方式， 12 16 24 列
栅格系统分为行和列，行和列的单元格为栅格。通过改变元素占据栅格的数量改变布局样式。
每一个格子都是结构，少的没关系多的挤下来模仿bootstrap的原理
在这里插入图片描述
改变它们占据格子的大小，来改变布局。

容器由整个界面变成某个容器里面

 <!-- col-
      col-1
      col-2
      col-3

      col-12

  col-sm-
  col-md-
  col-lg-
  col-xl- -->

 <!-- 就近原则 -->
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 ">1</div>
      <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 ">2</div>
      <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 ">3</div>
  
    </div>
  </div>

col-md-offet-4 :margin-left :
col-md-push-4 :
交换位置：
col-md-push-4:往右
co-md-pull-4 :左拉

只在中屏幕及以上现实：d-none 隐藏超小屏幕以上
d-md-block 显示中屏幕

仅显示小屏幕：d-md-none 隐藏中屏幕以上

响应式布局优缺点：
在这里插入图片描述

在这里插入图片描述

移动端屏幕适配(mobile)

与响应式布局的关系（pc+mobile）

在各种设备上正常显示，终端不同
在这里插入图片描述
不用必须使用rem
px 、% 、em 、rem 、vw vh (100)

媒体查询不必须只使用移动端适配

1rem = viewPort / 18.75 (系数)
获取浏览器视口宽
document.document.Element.getBoundingClientRect().width;
window.innerWidth;

盲打一波~

(function(){
‘use strict’;
setRemUnit();
window.addEventListener(“resize”,setRemUnit);
function setRemUnit(){
var docEl = docuemnt.document.Element;
var viewPort = docEl.getBoundingClient.width || window.innerWidth;
var ratio = 18.75;
docEl.style.fontSize = viewPort / ratio ‘px’;
}

})();

border : 1px 与dpr 有关系
动态判断dpr 设置border宽度 d对视口进行简单缩放
dpr = scale = 1/ dpr;

通用适配方案：

(function(){
‘use strict’;
var docEl = docuemnt.document.Element;
var viewportEl = document.querySelector(“meta[name=“viewport”]”);
var dpr = window.devicePixelRatio || 1;
//设置最小与最大宽度
var maxWidth = 540;
var minWidth =320;

	dpr = dpr >= 3 ? 3 : (dpr >=2 ? 2 : 1);
	docEl.setAttribute('data-dpr',dpr);
	docEl.setAttribute('max-width',maxWidth );
	docEl.setAttribute('min-width',minWidth );
	//获取放大的倍数
	 var scale = 1 / dpr;
  var content  = 'width:device-width;inital-sacle='+scale +',maxmum-scale= '+scale +',minmun-sacle= '+scale +',user-scalable = no';
  if (viewportEl){
   		viewportEl.setattribute('content',content);
  }else{
       viewportEl= document.creatElement('meta');
       viewportEl.setAttribute('name','viewport');
       viewportEl.setAttribute('content',content);
       document.head.appendChild(viewportEl);
 }
	 

	setRemUnit();		
	window.addEventListener("resize",setRemUnit);
	function setRemUnit(){
	      var docEl = docuemnt.document.Element;
           var viewPort = docEl.getBoundingClient.width || window.innerWidth;
           var ratio = 18.75;
           //此刻的视口宽度已经是 * 过dpr
       if (maxWidth && (viewPort / dpr > maxWdith)){
           viewPort  = maxWdith * dpr;
       }else if(minWidth && (viewPort / dpr < minWidth)){
           viewPort  = minWdith * dpr;
       }
           docEl.style.fontSize = viewPort  / ratio 'px';		
	}

})();

溢出隐藏：只对块元素有效
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
webkit内核浏览器才可以：
取消a标签中的点击事件高亮：
-webkit-tap-highlight-color:transparent;

移动端适配总结：
其他适配情况：
固定宽高
vw/vh 兼容性问题

移动端事件
pc端事件，keydown keyup
触摸事件： 重点
touch事件
pointer事件 鼠标和指针事件统一为触摸事件
手势事件 gesture
传感器事件 sensor

<script>

var docEl = docuemnt.documentElement;

docEl.addEventListener('touchstart',TouchStart,false);

docEl.addEventListener('touchmove',TouchMove.false);

docEl.addEventListener('touchend',TouchEnd,false);

function TouchStart(){
  console.log('TouchStart');
}

function TouchMove(){
  console.log('TouchMove');
}
function TouchEnd(){
  console.log('TouchEnd');
}

</scipt>

touch 事件的event事件
在这里插入图片描述
主要学习
1、changedTouches : length 的长度都不改变
2、**targetTouches ** :
3、touches :

var changedTouches = e.changedTouches[0];//一根手指
changedTouches 信息
在这里插入图片描述
clientX/clientY 可视区 xy
pageX/pagey 滚动条整个界面的xy
force :力度大小
radiusX/Y 指头的半径
rotationAngle 旋转角度
screenX/Y 屏幕的xy

在界面上动态显示pageX / Y
var box= document.querySeletor(‘#box’);
var start = document.querySeletor(‘.start’);
box.addEventListener(‘touchstart’,(e)=>{
var touch = e.changedTouches[0];
start.innerHTML = touch开始移动的位置：${parseInt(touch.pageX),${parseInt(toych.pageY)},false}
})

获取界面宽高：
var widthdoc = document.documentElement.offsetWidth;
var heightdoc = document.documentElement.offerHeight;
获取窗口的宽高
var clientwidth = document.document.clientWidth;
var clientHeight = document.document.clientHeight;

在这里插入图片描述
单击：tap 250毫秒之内
双击：double-top 2tap
press >250ms
swipe 快速滑动上下左右都可以监听
pan 拖动事件与drug 拖拽不一样这里仅仅是一个事件满足条件就触发
还有多指旋转和滑动

hammer.js锤子
封装好的高级事件兼容性更好
引入hammer.min.js
var docEl = document.getElementById(‘box’);
var hammer = new Hammer(docEl );
hammer.on (‘pan swipe press tap doubletap pinch rotate’,function(ev){
console.log(ev.type);
});
ev中

移动端调试：
f12 调试界面 (可以看另外的中dev Tools 调试的学习笔记)
真机查看

下载 phpstudy 软件开启：-> 把项目拉到里面 -> 浏览器访问

cmd 中 ipconfig ping 出ip 地址访问
手机与PC需要在同一个网络环境下，可以借助草料二维码生成之后扫描

在这里插入图片描述
返回顶部真机调试和pc 时候兼容性可能是docment 也可能是body节点不同.

在这里插入图片描述

在真机调试时控制台可能无法捕捉需要用调试工具

需要环境 node.js
cmd -> 检查是否安装 node -v 直接访问官网下载安装即可傻瓜式安装.

Vorlon,js https://www.vorlonjs.io/
安装Vorlon.js $ npm i -g vorlon / $ cnpm i -g vorlon
可以换为国内的淘宝镜像更快 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

Vorlon.js 安装完毕直接cmd vorlon 直接run启动。
可以看到端口号 1337或者是你的端口号，用你的ip 和端口号去直接访问.
在这里插入图片描述
并在你的项目中加入

然后在真机运行 console.log 可以直接在控制台中输出.

多终端同步工具Browsersync
网址：https://browsersync.io/
在这里插入图片描述
安装：npm install -g browser-sync / cnpm install -g browser-sync
一定要在你要检测的文件下打开cmd !!!
启动并输入你要检测的文件类型。
css文件 : browser-sync start --server --files "css/.css" ,browser-sync start --server --files " " 全部
端口 3000
在你修改代码的时候，所有终端下的内容都会直接刷新

前端终端检测
Zepto 移动端中比jquery 轻量

navigator.userAgent.match(/android|iphone|ipad|ipod/i);
在这里插入图片描述

移动性能优化

html中的css和javascript
网站兼容：https://caniuse.com/ 可以看哪些可以适配的标签兼容的网站

图片优化
1、图片多和大会导致http请求多和大
图片压缩：智图压缩，等webp移动端兼容 pc可能不兼容
尽量不用图片
变成base64位，直接内嵌大了不推荐
一般是利用构建工具。
雪碧图sprite，小图标合并为一个图片发一个请求就可以了.优化图片获取
图片懒加载 lazy load js中讲述
结构嵌套越多，javascript:;
在这里插入图片描述

在这里插入图片描述
避免空连接，最好都要写上

table 属于慢元素慢标签会在界面读取加载完成后突然蹦出来

资源按需加载和预加载
当出现在可视区范围内，就会加载. 数据和图片都是一个思路
获取所有按需加载的集合，类数组转化为数组。
在这里插入图片描述
判断是否在可视区范围内

预加载：浏览漫画的时候比较常用当你浏览上一张漫画的时候，下一张漫画就加载好了。

swiper触摸滑动插件
一段程序实现了触摸滑动的功能.可以在移动端/pc
官方中文网：https://www.swiper.com.cn/
相关代码可以下载修改直接使用：
在这里插入图片描述

通过本地文件后者是cdn下载，解压后
使用流程：
1.加载swiper文件，css和js
2.完成Swiper的HTML结构和CSS 样式.
3.初始化Swiper
4.如果版本升级，一切以官网为准.

在这里插入图片描述
Swiper常用的API:

1.Swiper初始化：用于初始化一个Swiper，返回初始化后的Swiper实例

new Swiper(swiperContainer, parameters) 在这里插入图片描述

2.基础配置
const swiper_init = new Swiper(‘.swiper’,{
initialSlide: 0,
// direction: ‘horizontal’, 默认
direction: ‘vertical’,
loop: true,//首尾互联切换
speed:300,//切换速度
// effect:‘slide’, //立体位移默认
// effect:‘fade’,//淡入淡出配合crossFade：true使用
// fadeEffect:{
// crossFade:true
// },
// effect:‘cube’,//方块
// effect:‘coverflow’,//3d流
// effect:‘flip’,//3d翻转
grabCursor:true, //pc端小抓手
slidesPerView:2,//视线内展示多个使用effect有影响应该是宽度高度问题
freeMode:true, //滑动任意多个可以用这个来做滑动菜单
on:{
//注册事件
//监听事件相关处理函数
init:function(swiper){
console.log(this===swiper); //true 如果是箭头函数不等为false
}

   }

   });

3.事件 events
在这里插入图片描述

4.属性
在事件中调用相关的处理函数，可以this指向属性

 on:{
           //注册事件
           //监听事件相关处理函数
           init:function(swiper){
               console.log(this===swiper); //true 如果是箭头函数 不等 为false
               console.log('init');
            //    console.log(this); 
            console.log(this.activeIndex); //当前活跃的索引
          
            console.log(this.width,this.height); 
                
               
           },
           slideChangeTransitionStart:function(swiper){
               //回调函数，swiper从当前slide开始过渡到另一个slide时执行。
               console.log('slideChangeTransitionStart');
               console.log(this.activeIndex); 
               console.log(this.previousIndex); 
           },
           slideChangeTransitionEnd:function(swiper){
               //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
               console.log('slideChangeTransitionEnd');
           }


          
       }

5.方法
slideNext() 切换下一个滑块
slidePrev() 切换上一个滑块
slideTo() 控制Swiper切换到指定slide
html 注意调整宽高

				 <button id="btn-prev">上一个</button>
                <button id="btn-next">下一个</button>
                <button class="btn-index" date-index="0">1</button>
                <button class="btn-index" date-index="1">2</button>
                <button class="btn-index" date-index="2">3</button>

js:

	   const $prevBtn = document.getElementById('btn-prev');
       const $nextBtn = document.getElementById('btn-next');

       $prevBtn.addEventListener('click',()=>{
        swiper_init.slidePrev();
       },false);

       $nextBtn.addEventListener('click',()=>{
        swiper_init.slideNext();
       },false);

       const $indexBtns = document.querySelectorAll('.btn-index');
       //循环绑定事件
       for (const $el of $indexBtns){
            $el.addEventListener('click',()=>{
                swiper_init.slideTo($el.data-index);
            },false);
       }

6.控制
在这里插入图片描述
autoplay:true,//等同于以下设置
/autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},/

        //分页器 小圆点
        pagination: {
            el: '.swiper-pagination',
            clickable:true,//点击小圆点可以切换Swiper
        },
        navigation:{
            nextEl:'.swiper-button-next',
            prevEl:'.swiper-button-prev',//左右点击
        },
        scrollbar:{
            //滚动条
            el:'.swiper-scrollbar',
            draggable: true,
            dragSize: 30,
            
        },
        keyboard:true,//键盘
        mousewheel:true,//鼠标


**swiper 触摸滑动事件**

swiper触摸滑动

            <img
            src="./image/logistics-phone.png"
            alt=""
            class="logistics-phone"
            id="logistics-phone"
          />
          <img
            src="./image/logistics-person.png"
            alt=""
            class="logistics-person"
            id="logistics-person"
          />
          <img
            src="./image/logistics-text.png"
            alt=""
            class="logistics-text"
            id="logistics-text"
          />
        </div>
        <div class="swiper-slide purchase-slide">
          <img
            src="./image/purchase-phone.png"
            alt=""
            class="purchase-phone"
            id="purchase-phone"
          />
          <img
            src="./image/purchase-person.png"
            alt=""
            class="purchase-person"
            id="purchase-person"
          />
          <img
            src="./image/purchase-text.png"
            alt=""
            class="purchase-text"
            id="purchase-text"
          />
       </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>

});

项目作业：

脱发不是梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web开发入门

视口 viewport获取屏幕宽度document.documentElement.clientWidthdocument.documentElement.getBoundingClientRect().widthwindow.innerWidth获取设备比 devicePixelRatiowindow.devicePixelRatiobox-sizingpc 多用 :box-sizing:concent-box; 默认外扩移动端多用： box-sizing:boder-bo
复制链接

扫一扫