移动端开发
2021-09-16 14:36:02

meta视口标签

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

媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 1.超小屏幕下(手机) 小于768  布局容器宽度为100% */
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
        }

        /* 1.小屏幕下(平板) 大于等于768   布局容器宽度为750px */
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }

        /* 1.中等屏幕下 992以上  布局容器宽度为970px */
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }

        /* 1.大屏幕下 1200以上  布局容器宽度为1170px */
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }

二倍图

插入图片

对于插入图片来说,市面上大多数的视网膜屏会自动放大图片css像素的两倍.按这个比例放大倍数会造成图片模糊.

解决方法:比如对于一张100*100的图片,手动设置他的宽高为原来的一半,即50 50这样他自动放大二倍就会编程原来的比例

或者切图切出一张二倍图,比如100*100的图片切出一个二倍的200 200这样设置宽高为100 100即可

背景图片缩放

background-size

  • 数值 第一个参数为宽度,第二个参数为高度,空格隔开.如果只写一个就是宽度,高度等比例缩放
  • 百分比 相对于父元素
  • cover 等比例扩大到足够大把背景区域填充满
  • contain 把图像等比例扩大到宽度或高度的最大值

解决方法:比如对于一张100*100的图片,手动设置他的宽高为原来的一半,即50 50这样他自动放大二倍就会编程原来的比例

移动端

流式布局(百分比布局)

搭配max-width和min-width

参考DJ-Mobile 京东百分比布局

flex布局

rem适配布局

为什么会有这种布局?

1页面布局文字能否随着屏幕大小变化而变化?

2流式布局和flex布局主要针对于宽度布局,那高度如何设置?

3怎么让屏幕发生变化的时候元素高度和宽度等比例缩放?

rem单位

先说一下em,em是父元素字体大小,举个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div {
        font-size: 12px;
    }

p {
        width: 10em;
        height: 10em;
        background-color: azure;
   }
        
        
  //body
    <div>
        <p></p>
    </div>

这样的页面p元素的大小就是长为120px,宽为120px

rem是相对于html元素的字体大小,即根元素

rem优点:可以通过改变html里面文字大小来改变页面中元素大小

媒体查询

媒体查询可以根据不同的屏幕尺寸设置不同的样式

语法:

1
2
3
@media mediatype and|not|only (media feature){
	css-code;
}

mediatype媒体类型

​ print 打印机 screen屏幕

media feature 媒体特性

​ width 宽度 min-width最小宽度 max-width最大宽度

例子:

1
2
3
@media screen and (max-width:800px){
	background-color:red;
}

上面的代码实现当屏幕尺寸小于等于800像素的时候背景颜色为红色.

媒体查询+rem

根据屏幕大小设置不同的html字体大小,从而页面中的元素使用rem单位随着html中文字的大小而变化

媒体查询引入资源

针对页面布局差异较大的时候,比如大屏时一行显示两个div,而屏幕小的时候需要换行显示,这种时候需要写两个css布局文件,根据屏幕大小改变时来展示不同的布局

1
2
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style320.css" media="screen and (min-width:6400px)">

Less

css弊端

  • css需要书写大量看似没有逻辑的代码,冗余度高
  • 不方便维护和扩展,不利于复用
  • css没有很好的计算能力

基础

Leaner Style Sheets 是一门css扩展语言,也称为css预处理器

less变量

再css种一些颜色和数值经常使用

1
@变量名:值;

比如

1
2
3
4
5
6
7
//定义变量
@mainColor:red;

//使用
body{
	color:@mainColor;
}

编译

easy less插件,less文件保存自动生成css文件

嵌套

  • 后代
1
2
3
4
5
6
7
8
.header{
	width:200px;
	height:200px;
	//less嵌套 子元素的样式直接写道父元素里面就好了
	a{
		color:red;
	}
}
  • 伪类使用&
1
2
3
4
5
6
a{
	color:red;
	&:hover{
		color:blue;
	}
}

这就相当于下面的css

1
2
3
4
5
6
a{
	color:red;
}
a:hover{
	color:blue;
}

Less运算

  • 运算符左右都要有空格隔开
  • 两个数参与运算,有不同的单位,以第一个单位为准

rem适配方案

  • 首先选一套标准尺寸,750为准
  • 用屏幕尺寸除以划分的份数得到了html里面文字的大小.但是我们知道不同屏幕下得到的文字大小不一样
  • 页面元素的rem值 = 页面元素值(px) / (屏幕宽度/划分的份数)

页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)

屏幕宽度/划分的份数就是 html font-size的大小

rem适配方案2

flexible.js+rem

响应式布局

利用媒体查询,通过改变布局容器的大小来适应不同的设备

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
        .container {
            height: 150px;
            background-color: aqua;
            margin: 0 auto;
        }

        /* 1.超小屏幕下(手机) 小于768  布局容器宽度为100% */
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
        }

        /* 1.小屏幕下(平板) 大于等于768   布局容器宽度为750px */
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }

        /* 1.中等屏幕下 992以上  布局容器宽度为970px */
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }

        /* 1.大屏幕下 1200以上  布局容器宽度为1170px */
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
Prev
2021-09-16 14:36:02
Next