移动端布局

视口

布局视口

视觉视口

理想视口-重点

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

物理像素比

主要针对于移动端 分辨率不足的问题 常见解决方案是 准备一张2倍图 background-sizing图片缩放为原先图片宽度高度的一半 就不会出现分辨率不清晰问题

物理像素 就是我们所说的分辨率 IPHONE8的物理像素是750

在里面 IPHONE8 ; 1px开发像素 = 2px物理像素

背景缩放 background-size

防止图片在移动端像素问题 准备一张100100px的图片 利用background-size 缩放50px50px

移动端初始化

特殊样式初始化

/* 点击高亮我们需清除 设置为transparent透明 */
*{
    -webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式 */
input{
    -webkit-appearance: none;
}
/*禁用长按页面时候的弹出菜单*/
img,a{
    -webkit-touch-callout: none;
}

移动端布局

流式布局(百分比布局)

/* 流式布局的基础设置 */
body{
    width: 100%;/*宽度为100%*/
    min-width: 320px;/*最小宽度*/
    max-width: 640px;/*最大宽度*/
    margin: 0 auto;/*居中对齐*/
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.5;/*行高 字体大小的1.5倍*/
    color: #666;
    background: #fefe;
    height: 2000px;
}

flex布局 重要-弹性布局

原理

flex父容器属性表

flex-direction主轴侧轴

justify-concent 设置主轴上的子元素排列方式

align-item 设置侧轴上子元素排列方式

align-content 设置侧轴上的子元素排列方式

flex-wrap 设置子元素是否换行

由于设置flex布局 默认是不换行的 所有的元素在一行中显示

flex-flow简写

子元素的属性 flex;number

flex: 20%;也可以跟百分比 相对父级

ul里面有10个小li需要一行5个

利用下面代码实现

.subnav-entry{
    display: flex;
    flex-wrap: wrap;/*强制换行*/
    border-radius: 8px;
    background-color: #ccc;
    margin: 0 4px;
    /* 默认宽度是body宽度100% */
}
.subnav-entry li{
    flex: 20%;
}

子元素属性侧轴排列方式 align-self

自定义排列顺序 order

1,2,3,4,5
3:(order:-1)
3,1.2.4.5

背景颜色的渐变

让文本里面的文字隐藏

REM布局

em

子元素的宽高是10em 父元素字体是12px 那么盒子宽度就是120*120

rem

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

子元素的宽高是10rem html字体是1px 那么盒子宽度就是140*14 0

媒体查询

媒体查询( Media Query )是CSS3新语法。

媒体查询可以根据不同的屏幕尺寸在改变不同的样式

1. 使用@media查询,可以针对不同的媒体类型定义不同的样式
2. @media可以针对不同的屏幕尺寸设罩不同的样式
3. 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
4. 目前针对很多苹果手机、Android手机 ,平板等设备都用得到多媒体查询

响应式布局+引入资源+根据不同的窗口大小响应css样式

Less

介绍

作用

less 变量

less 编译

less嵌套

less 的加减乘数

less

css

rem适配方案

1.屏幕宽度：首先我们选一套标准尺寸750为准
2.文字大小：我们用屏幕尺寸除以我们划分的份数得到了htm1 里面的文字大小但是我们知道不同屏幕下得到的文字大小是不一样的 (750/15等份数)=50px这个是文字大小
3.rem:页面元素的rem值=页面元素在750像素的下px值/ html 里面的文字大小(比如我一个div要100的px宽度 直接写死是不行的 可以写成 100/50 = 2rem

案列

初始设置