移動端SASS / SCSS swiper iscrollレムagax弾性箱

、サス/ SCSS
Ruby言語

1.scss变量
	$w:300px;$h:235px;
	.mm{width:$w;height:$h;}
2.sass的嵌套写法:
	.header{ height:200px;
	    h1{font-size:18px}
	}

二、swiper.js
カルーセル
ページで1ロードswiper.min.cssスタイルファイル
2.ロードswiper.min.jsファイル
3.書き込みHTML構造を

<div class="swiper-container baaner">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/img1.jpg" ></div>
				<div class="swiper-slide"><img src="img/img2.jpg" ></div>
				<div class="swiper-slide"><img src="img/img3.jpg" ></div>
				<div class="swiper-slide"><img src="img/img4.jpg" ></div>
				<div class="swiper-slide"><img src="img/img5.jpg" ></div>
			</div>
			<div class="swiper-pagination">分页器</div>
			<div class="swiper-button-prev">后进</div>
			<div class="swiper-button-next">前进</div>
			<div class="swiper-scrollbar"></div>
		</div>
4.写javascript脚本
	var mswiper=new Swiper("#mm",{
		direction:"vertical",   //垂直方向   默认水平 (不需要垂直注释即可)
		autoplay:2000,	  //自动播放
		loop:true,	  //循环
		speed:1000,	  //展示速度
		pagination:".swiper-pagination",	//分页器
		prevButton:".swiper-button-prev",	//后退
		nextButton:".swiper-button-next"	//前进
	})

三、iScroll.js:
iscroll.jsファイルの読み込み
1.html構造を

<div class="box" style="height:3rem">
			<div class="content" style="padding:50px 0" >
				滚动内容
			</div>
		</div>
 注:设置css样式时box的高度必须小于content高度
2.js结构:
	//禁用浏览自带默认touchmove事件
	document.addEventListener("touchmove",function(ev){
		ev.preventDefault()
	},{
	 passive:false}
	)
     var mscroll=new IScroll(".box",{
		scrollX:true,		//水平滑动
		scrollY:true,   //垂直滑动
	});

四、AJAX:

 1   $.ajax({
		url:"http://www.abc.com/reg.php?uname=李宝裤&usex=先生",
		type:"get/post",
		success:function(msg){
			//msg为返回的数据
		}
	})


2  $.get(url,{},function(){},"json")	
http://www.abc.com/reg.php?uname=李宝裤&usex=先生
$.get("http://www.abc.com/reg.php",{uname:"李宝裤",usex:"先生"}
	,function(msg){
		//msg为返回的数据
		}
     ,"json")

  3   $.post(url,{},function(){},"json")//与get一样

五、REM:一般的なデフォルト1rem = 16pxに、
動的な設定レム

function  rem(){
	document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";
 }
  rem();
//事件  onresize当屏幕的尺寸发生改变的时候会触发该事件
window.rem;

第六に、弾性箱:

diplay:曲がる; //弾性カセット定義
フレックス方向:行|行優先逆|カラム|カラム逆; // 子の親コンテナにおける弾性要素の指定された位置。
フレックスラップは:ラップ超え//ラップ
ALIGN-アイテム:屈曲開始|フレックス端|中央|ベースライン|ストレッチ// 設定または側軸(縦軸)の方向に弾性要素カートリッジアライメントを取り出します。
正当化コンテンツを:フレックススタート|フレックス・エンド|センター|間のスペース|スペースアラウンド// 内容を合わせ
フレックス成長:0 //弾性伸びボックス要素の比率を定義します。
フレックスシュリンク:1の弾性収縮率は//ボックス要素を定義します。
オーダー:数;(カスタム)//弾性サブの要素をソート

おすすめ

転載: blog.csdn.net/qq_44306441/article/details/89017108