python窗⼝界⾯⾃适应_⾃适应页⾯的实现⽅式
页⾯⾃适应
⾃适应是指页⾯内容⾃动适应屏幕⼤⼩，实现⾃适应的⽅法有多种：
1.简易场景实现⾃适应：浮动、页⾯居中、元素宽度不写固定⽽设置百分⽐⾃动匹配⼤⼩。这样在页⾯宽度发⽣变化时，能利⽤以上特性实现简易的⾃适应效果。
2.如果实际开发中有复杂场景的需求，⼀般通过编写多套CSS代码，然后⽤媒体查询技术，让页⾯根据不同屏幕尺⼨来加载不同代码模块以实现适配不同屏幕的⽬的。这种⽅式需要编写多套代码，虽然⼯作量⼤，但对于不同屏幕尺⼨的设备都有单独⼀套CSS代码，维护起来更⽅便。
3.响应式布局，响应式布局是指根据不同屏幕尺⼨⾃动调整页⾯显⽰效果实现⾃适应(也要⽤到媒体查询技术)。响应式布局⼀般有栅格系统布局，flex布局。bootstrap框架的核⼼就是栅格系统。 (后⾯详细介绍栅格系统的实现⽅式)。
CSS3 媒体查询 media queries
媒体查询可针对不同设备场景使⽤不同css，⼀般栅格系统和多套代码逻辑匹配页⾯是都要⽤媒体查询来确定页⾯⼤⼩。媒体查询技术的原理：通过匹配不同屏幕设备的特征，让不同特征下的CSS代码⽣效。
常⽤匹配特征 media features
width/height：浏览器宽⾼
max-width： 表⽰⼩于最⼤宽度时⽣效
min-width： 表⽰⼤于最⼩宽度时⽣效
device-width/device-height: 设备屏幕分辨率宽⾼
resolution：设备分辨率
orientation：portrait(纵向),⾼度⼤于等于宽度时，landscape(横向),⾼度⼩于宽度时
特征匹配操作符
当媒体类型匹配且表达式为真的时候，对应style就会起作⽤:
1.and
@media (min-width: 700px) and (orientation: landscape) {
.
..
}
表⽰最⼩宽度限制在700px，当浏览器宽度⼤于等于700px且为横向时CSS代码⽣效
2.逗号分隔
@media (max-width: 500px), handheld and (orientation: landscape) {
...
}
表⽰最⼤宽度限制在500px，当浏览器宽度⼩于等于500px或者⼿持设备且为横向时⽣效
媒体查询引⼊
link 引⼊⽅式
@media导⼊
@media screen and (max-width: 990px){
.container{
background: orange;
}
}
Flex布局
传统的布局⽅式：浮动+position定位+display属性对简单布局需求可轻易实现，但对于绝对居中这种常见的场景的实现却不太容易，同时浮动布局也会产⽣⼀些副作⽤效果。Flex弹性布局，⽤来为盒状模型提供最⼤的灵活性，可以简便、完整、响应式地实现各种页⾯布局。⽬前，它已经得到了所有浏览器的⽀持。
flex的基本概念：
1.任何⼀个容器元素都能指定成flex容器
块级元素：display:flex
⾏内元素也能使⽤flex布局: display:inline-flex;
2.使⽤Flex布局的元素称为 Flex 容器(flex container)，简称"容器"。它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬(flex item)，简称"项⽬"。
容器中有两个轴线，⽔平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
3.flex container容器的6个属性
flex-direction ⽅向 row(⾏排列默认)/row-reverse/column(纵向)/column-reverse
flex-direction:row时主轴为X⽅向/column时主轴为Y⽅向
flex-wrap 换⾏ nowrap(默认不换⾏)/wrap/
flex-flow 上⾯两个属性的简写 flex-flow:row wrap 上⾯两个属性可写成⼀⾏
justify-content 主轴对齐⽅式 :
*space-between(多余空间放中间)
space-around(多余空间放两边)
flex-start(item元素靠近主轴起点)
flex-end(item元素靠近主轴终点)
center(item元素居中)*
align-items 交叉轴对齐⽅式
*stretch伸展(默认值，前提是item元素宽/⾼度不确定)，所有元素宽/⾼度都撑满整个container
flex-start(item元素靠近交叉轴起点)
flex-end(item元素靠近交叉轴终点)
center(item元素居中)
baseline (item元素第⼀⾏⽂字的baseline对齐)*
align-content多轴线在交叉轴⽅向的对齐⽅式(多⾏/多列)，为什么不是主轴，因为已经换⾏了是多⾏啊。
flex-start item靠近交叉轴起点
flex-end item元素靠近交叉轴终点
center item元素靠近交叉轴中⼼点
flex布局对齐方式
space-between item元素与交叉轴两端对齐
space-around item元素每根轴线两侧间隔相等，轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍
stretch (默认值)item元素占满整个交叉轴
flex item的6个属性
order item元素的顺序
flex-grow有多余空间item元素分配⽐例，默认为0即不放⼤
flex-shrink空间不够时item元素收缩⽐例，默认为1即缩⼩⼀倍
flex-basis指定item元素在分配多余空间之前占⽤主轴⼤⼩main size(px/%)，默认auto即项⽬本⾝⼤⼩
flex上⾯三个属性的简写，注意顺序
align-self指定单个item元素⾃⾝的对齐⽅式，可覆盖align-item属性，默认auto继承align-item的属性
*flex-start
flex-end
center
baseline
stretch*
栅格系统
栅格系统是⼀种⾃适应页⾯的布局⽅式，⽤于通过⼀系列的⾏(row)与列(column)的组合来创建页⾯布
局，实际要展⽰的内容可以放⼊这些创建好的栅格中。当页⾯宽度发⽣改变时，每个栅格的⼤⼩会⾃动调整以适应页⾯尺⼨。
栅格系统的实现原理：
1.将页⾯中每⾏布局分成12个等份，每⼀等份即⼀个grid。1个grid占1/12，2个grid占2/12，依此类推。页⾯上所有grid由⽗容器container包裹，所有grid设置浮动或者设置成⾏内元素保持在⼀⾏，⼀⾏排列不下时⾃动换⾏。所有grid设置成border-box。
2.定义不同屏幕尺⼨时grid不同的css class名称，⽐如:
默认屏幕尺⼨时使⽤:grid-df-1,grid-df-2
屏幕⼩尺⼨使⽤：grid-sm-1,grid-sm-2
屏幕中等尺⼨使⽤：grid-md-1,grid-md-2
屏幕⼤尺⼨使⽤：grid-lg-1,grid-lg2
3.⽤媒体查询
@media screen and (min-width:768px){
......
}
限制不同浏览器宽度(即不同屏幕尺⼨)时container的固定宽度。同时设置不同屏幕尺⼨时，grid对应的css 宽度⽐例。
4.设置每个grid在不同屏幕尺⼨时需要占的格数。这时media queries会在不同屏幕尺⼨的⼤⼩时，让每个grid显⽰应有的⽐例。⽐如
代码⽰例：
@media screen and (min-width:768px){
#container{
width:768px;
}
.grid-sm-1{
width:8.3333333%;
}
.grid-sm-2{
width:16.666666%;
}
.grid-sm-3{
width:25%;
}
.grid-sm-4{
width:33.333333%;
}
.grid-sm-5{
width:41.666666%;
}
.grid-sm-6{
width:50%;
}
.grid-sm-7{
实现效果如下，当页⾯宽度为正常⼤⼩时当页⾯宽度⼩于媒体查询设定的最⼤宽度时

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。