移动Web开发学习笔记 流式布局-百分比布局-flex布局-rem布局
文章目录
- 移动Web开发学习笔记
-
- 视口 viewport
-
- meta视口标签
- 二倍图
-
- 物理像素 & 物理像素比
- 二倍图
- 背景缩放 background-size
- 移动端技术解决方案
-
- CSS3盒子模型box-sizing
- 移动端特殊样式设置
- 移动端常见布局
- 流程布局/百分比布局
- flex布局
-
- flex布局小练习
-
- 需求1: 常见的上下结构
- 需求2:背景渐变色
- 需求3:10个盒子占两行
- 需求4：> 箭头符号
- rem适配布局 rem+媒体查询
-
- rem单位
- 媒体查询 Media Query
-
- 引入资源
- rem适配方案
-
- 技术方案1:less+媒体查询+rem
- 技术方案2:flexible.js+rem
- 响应式布局 bootsrap
移动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
响应式需要一个父级作为布局容器。
在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
