移动Web开发学习笔记流式布局-百分比布局-flex布局-rem布局

nuise_

已于 2022-07-26 10:30:36 修改

阅读量603

点赞数

分类专栏： css+html 文章标签：前端 css 学习

于 2022-06-04 20:08:17 首次发布

本文链接：https://blog.csdn.net/qq_41370833/article/details/125054382

版权

css+html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

移动Web开发学习笔记

视口 viewport

视口是浏览器显示页面内容的屏幕区域，分为布局视口、视觉视口和理想视口。
布局视口:移动设备的浏览器默认设置了布局视口
问题:元素显示是按在布局视口显示的，所以视觉视口元素看上去很小，默认通过手动缩放网页
在这里插入图片描述
理想视口: 网页在手机屏幕显示完整，手机屏幕有多宽，布局视口就有多宽

meta视口标签

meta视口标签的主要目的:布局视口的宽度和理想视口宽度一致

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

属性	解释说明
width	宽度设置的是viewport视口宽度，可以设置为device-width设备宽度
initial-scale	初始缩放比，大于0的数字
aximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（ 1或0）

二倍图

物理像素 & 物理像素比

物理像素: 真实存在的，在厂商出厂时就设置好了，比如苹果6是750*1334
物理像素比: 1px能够显示的物理像素点的个数

PC端: 1px(css像素)=1个物理像素
移动端: 不同的手机物理像素比不同，iPhone8中1px=2个物理像素
在这里插入图片描述

二倍图

图片按照物理像素比放大会变模糊
在标准的viewport设置中，使用多倍图来提高图片质量，解决在高清设备中的模糊问题，通常使用二倍图

举例
需要一个5050css像素的图片，直接放入iphone8(物理像素比为2)中会放大2倍，图片会模糊。
可以采用放一个100*100css像素的图片，手动把这个图片缩小成5050像素，放大两倍后图片依然是清晰的，因为图片本身就是100*100css像素的。

<style>
	img{
		width:50px;
		height:50px;
	}
</style>
<body>
<img src='100.jpg'>
</body>

背景缩放 background-size

语法: background-size: 背景图片宽度背景图片高度

为了清晰一般缩放大小和盒子大小一致

说明
1.如果只设置一个参数，另外一个参数会等比例缩放
2.单位: 长度|百度比|cover|contain
cover 扩展图片到完全覆盖背景区域
在这里插入图片描述
contain 扩展图像使其宽度或高度达到内容区域边界即可。

移动端技术解决方案

css初始化 normalize.css

CSS3盒子模型box-sizing

传统模式宽度计算盒子宽度 = width+border+padding
css3盒子模型盒子宽度 = width(包含了border和padding)
默认值：content-box

/*CSS3盒子模型   width表示的范围到border*/
box-sizing:border-box;  
/*传统盒子模型 width表示的范围到content*/
box-sizing:content-box;

移动端特殊样式设置

1.点击高亮需要清除

-webkit-box-highlight-color:transparent;

2.去掉IOS的按钮和输入框的默认样式，才可以自定义按钮和输入框样式

-webkit-appearance:none;

3.禁用图片或链接长按页面时弹出菜单

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

移动端常见布局

单独制作移动端页面(主流)
- 流式布局(百分比布局)
- flex弹性布局
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端
- 媒体查询
- bootstarp

流程布局/百分比布局

流式布局: 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，内容向两侧填充

可以配合下面属性使用限制盒子的伸缩的最大值与最小值

max-width 最大宽度 max-height 最大高度
min-width 最小宽度 max-height 最小高度

flex布局

学习笔记

flex布局小练习

需求1: 常见的上下结构

修改主轴为y轴,把侧轴设置为居中对齐
在这里插入图片描述

.out{
	display:flex;
	flex-direction:column;
	align-item:center; /*单行元素*/
}

需求2:背景渐变色

语法:background:-webkit-linear-gradient(起始方向left…,颜色1,颜色2…)

需求3:10个盒子占两行

.out{
	display:flex;
	flex-wrap:wrap
}
.inner{
	//盒子里面可以写百分号，相对于父级来说
	flex:20%
}

需求4：> 箭头符号

一个正方形，设置白色的上边框和右边框，然后旋转45°

.more::after{
	content:'';
	width:7px:
	height:7px:
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform:rotate(45deg);
}

rem适配布局 rem+媒体查询

rem适配布局:通过媒体查询修改html元素的字体大小整体控制页面

rem单位

主要特点
1.页面布局文字也可以随屏幕大小变化而变化
2.流式布局和flex布局只要针对宽度布局，rem可以针对高度布局
3.屏幕发生变化的时候元素高度和宽度等比例缩放

rem(root em)是一个相对单位，相对于html元素的字体大小
em是一个相对单位，是相对父元素的字体大小

媒体查询 Media Query

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

语法: @media mediatype and|not|only (media feature){}

@media 声明是媒体查询
mediatype 媒体类型 all所有|print打印机|scree电脑屏幕等
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
媒体特性 width|min-width|max-width

/*宽度小于等于800的屏幕执行代码 !包含等于*/
@media screen and (max-width:800px){
	body{
		background-color:pink;
	}
}

建议从小到大写

引入资源

当样式比较多的时候，可以针对不同的媒体使用不同stylesheets(样式表)
原理:在link中判断设备的尺寸，然后引入不同的css文件

<link rel="stylesheet" media="ediatype and|not|only (media feature)" href="xxx.css">

rem适配方案

使用场景：当设备尺寸发生改变的时候，等比例适配当前设备

rem适配方案原理
1.使用媒体媒体查询根据不同设备设置html字体大小
2.页面元素使用rem做尺寸单位

技术方案1:less+媒体查询+rem
技术方案2:flexible.js+rem

技术方案1:less+媒体查询+rem

1.假设设计稿是750px
2.我们可以把整个屏幕划分为15等份
3.每一份作为html字体大小，这里就是50px

common.less

//定义划分的份数为15
@no:15
@media screen and (min-width:320px){
	html{
		font-size:(320px/@no);
	}
}
//....其他尺寸的媒体查询

安装easy less插件，代码写在less文件里，会自定生成css文件

将common.less导入到index.less中

@import "common";

css居中的笔记:https://blog.csdn.net/qq_41370833/article/details/123765686

magin居中，需要盒子有宽度

body{
	min-width:320px;
	width:15rem;
	margin:0 auto;
}

定位元素居中 position:absolute + transform，盒子宽度有无都行

.search-content{
	position:fixed; //固定定位和绝对定位特点基本一致
	top:0;
	left:50%;
	transform:translateX(-50%);/*相对于元素自身的50%*/
}

将外部盒子设置为flex盒子，中间弹性元素设置成flex=1自适应
flex=1 意思是flex:1 1 0% 表示可以增长，可以收缩，但在容器不足时会优先最小化内容尺寸
flex-grow 定义弹性元素的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink定义了弹性元素的缩小比例，默认为1，即如果空间不足，该弹性元素将缩小
flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即弹性元素本身的大小
在这里插入图片描述

.search-content{
	dipaly:flex;
	.classify{//固定部分
		//....
	}
	.search{
		flex:1; //自适应
	}
}

实现了三个不同内容的 div 平分空间

.container{
        width: 300px;
        display: flex;
}
div{
        border: 1px solid red;
        flex: 1;
 }

技术方案2:flexible.js+rem

flexible.js 移动端适配库
把当前设备划分成了10等份，不同设备都会被分成10份，不需要手动写不同屏幕的媒体查询。
会自动设置html的font-size的大小。

VSCode插件px to rem:px转换rem插件，写成px自动转换成rem
插件默认的html文字大小 cssroot:16px

修改插件默认的html文字大小
在这里插入图片描述

响应式布局 bootsrap

响应式需要一个父级作为布局容器。
在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

在这里插入图片描述

nuise_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动Web开发学习笔记流式布局-百分比布局-flex布局-rem布局

文章目录移动Web开发学习笔记视口 viewportmeta视口标签二倍图物理像素 & 物理像素比二倍图背景缩放 background-size移动端技术解决方案CSS3盒子模型box-sizing移动端特殊样式设置移动端常见布局流程布局/百分比布局flex布局flex布局小练习需求1: 常见的上下结构需求2:背景渐变色需求3:10个盒子占两行需求4：> 箭头符号rem适配布局 rem+媒体查询rem单位媒体查询 Media Query引入资源rem适配方案技术方案1:less+媒体查询+re
复制链接

扫一扫