移动端开发知识点整理（更新中）

最新推荐文章于 2022-08-15 19:54:41 发布

叶子_o

最新推荐文章于 2022-08-15 19:54:41 发布

阅读量218

点赞数

一、目录

移动端浏览器内核
不同浏览器内核前缀
css3的box-sizing属性
css3的box-flex
视口约束
固比固布局
img图片高度自适应
em与rem
媒体查询
单行/多行文本超出部分显示省略号
字号随屏幕宽度变化而变化

二、内容

1.移动端浏览器内核

微软：Trident
火狐：Gecko
Android原生浏览器/Chrome/QQ浏览器/苹果的Safari浏览器：Webkit
opera：Presto

2.不同浏览器内核前缀

微软/IE：-ms-
火狐：-moz-
谷歌：-webkit-
欧朋：-o-

3.css3的box-sizing属性

4.css3的box-flex

效果相当于display:flex;

div {
	display: -webkit-box;
}
div p:nth-child(1){
	height:100px;
	background-color:pink;
	-webkit-box-flex:1;
}
div p:nth-child(2){
	height:100px;
	background-color:purple;
	-webkit-box-flex:2;
}
div p:nth-child(3){
	height:100px;
	background-color:blue;
	-webkit-box-flex:3;
}

5.视口约束：

<meta name="viewport" content="width=device-width,user-scale=0,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

6.固比固布局
宽度：固定 + 自适应 +固定

方法一：绝对定位

.box{
	position:relative;
}
.left{
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:80px;
}
.center{
	box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:0 100px;
	width:100%;
	height:80px;
}
.right{
	position:absolute;
	right:0;
	top:0;
	width:100px;
	height:80px;
}

方法二：display:box

.box{
	display:-webkit-box;
}
.left{
	width:100px;
	height:80px;
}
.center{
	-webkit-box-flex:1;
	height:80px;
}
.right{
	width:100px;
	height:80px;
}

7.img图片高度自适应

通过css

div{
      width:50%;
      height:0;
      padding-top:39.68%;
      background:url('img/wflza.jpg') ;
      background-size:100%; 
    }

通过js

// css部分

div {
   float: left;
   width: 50%;
   border: 1px solid #ccc;
   box-sizing: border-box;
   max-width: 500px;
   background: url(timg.jpg) no-repeat;
   background-size: cover;
}


// html部分
<div class="box" style="height: 281.25px;"></div>
<div class="box" style="height: 281.25px;"></div>


// js 部分

// 得到div元素
  var boxs = document.querySelectorAll(".box");
  console.log(boxs);
 
  set();
  // 窗口尺寸被改变时候去执行
  window.onresize = set;
  function set() {
       // 原始图片宽：原始图片高 = 盒子宽：盒子高
      //   1280:720              = getComputedStyle(obj)["width"]
      var boxW = parseInt(getComputedStyle(boxs[0])["width"]);
      // 计算高度
      boxs[0].style.height = (720*boxW)/1280+"px";
      boxs[1].style.height = (720*boxW)/1280+"px";
  }

8.em与rem都是相对单位

em相对于父元素，如果标签本身有font-size，则相对于本身的font-size
rem相对于浏览器的font-size根元素

em:

body {
    font-size: 18px;
}  

.box1 {
    font-size: 2em; /*36px 是body字号的2倍*/
}

.box2 {
    font-size: 2em;/*72px 是box1字号的2倍*/
}

.box3 {
    font-size: 2em;/*144px 是box2字号的2倍*/
}


<body>
    body   
    <div class="box1">
        box1
        <div class="box2">
            box2
            <div class="box3">
                box3
            </div>
        </div>
    </div>
</body>

rem:

html {
    font-size: 40px;
}

.box1,.box2,.box3 {
    font-size: 2rem;  // 三个元素的font-size均为40*2=80px
}

9.媒体查询

<link href="1.css" rel="stylesheet">
<link href="2.css" media="(min-width:720px) and (max-width:1200px)" rel="stylesheet">
<link href="3.css" media="(max-width:720px)" rel="stylesheet">

10.单行/多行文本超出部分显示省略号

// 单行
.div1{
	width:100%;
	overflow:hidden; // 超出部分隐藏
	white-space:nowrap; // 强制不换行
	text-overflow:ellipsis; // 文本溢出加省略号
}

// 多行
.div2{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box; // 弹性盒子，同时也可以使宽度随视图大小变化
	-webkit-line-clamp:3; // 行数
	-webkit-box-orient:vertical;  // 垂直排列
}

11.字号随屏幕宽度变化而变化

<style>
   * {
       padding: 0;
       margin: 0;
   }

   html {
       font-size: 30px;
   }

   div {
       float: left;
       border: 1px solid #ccc;
       width: 33.33%;
       box-sizing: border-box;
       height: 6.666rem;
   }
</style>

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        setFontSize();
        function setFontSize() {
            var windowWidth = document.documentElement.clientWidth;
            // 假设设计图 宽600px  字号font-size:30px  600:30 = windowWidth:y
            document.documentElement.style.fontSize = 30*windowWidth/600+"px"; 
        }
        window.onresize = setFontSize;
    </script>   
</body>

叶子_o

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端开发知识点整理（更新中）

一、目录移动端浏览器内核不同浏览器内核前缀css3的box-sizing属性css3的box-flex视口约束固比固布局img图片高度自适应em与rem媒体查询单行/多行文本超出部分显示省略号字号随屏幕宽度变化而变化二、内容1.移动端浏览器内核微软：Trident火狐：GeckoAndroid原生浏览器/Chrome/QQ浏览器/苹果的Safari浏览器：We...
复制链接

扫一扫