文章目录
meta视口标签
-
meta 视口标签
<meta name="viewport" content="width=device-width. user-scalable=no,initial-scale=1.0 ,maximum-scale=1.0,minimun-scale=1.0">
标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比1.0
- 最小允许的缩放比1.0
二倍图
- 二倍图
手机的像素比 是1px (pc端)= 2px(手机端里) // 所以手机看会放大
img { //手机会把它放大2倍,所以这里设置它变小2倍,这样设置手机观看清晰度会更高!
width:50px;
height:50px;
}
//先放一个100*100 的图片
<img src="images/100*100.jpg" >
背景缩放 background-size: 图片宽度 图片高度
div {
background-size: 500px 200px;
background-size: 500px ; //只写一个参数 肯定是宽度 高度省略了, 会等比例缩放
background-size: cover; //要完全覆盖div盒子 可能有部分背景图片显示不全
background-size: contain; //高度和宽度等比例拉伸, 当宽度或者高度铺满div盒子就不再进行拉伸
}
移动端技术解决方案
box-sizing:border-box; //css3盒子模型
box-sizing:content-box; //传统盒子模型
- 移动端可以全用CSS3盒子模型
- pc端 要看兼容性
特殊样式
//css3盒子模型
box-sizing:border-box;
-webkit-box-sizing:border-box;
//点亮高亮我们需要清除清除 设置为transparent 完成透明
-webkit-tap-highlight-color: transparent;
//在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance: none;
//禁用长按页面时的弹出菜单
img,a {-webkit-touch-callout:none;}
移动端常见布局
flex弹性布局(推荐)
-
flex弹性布局(推荐)
flex布局父项创建属性:
flex-direction 设置主轴方向,进行自动排列 (默认为row)
div { display:flex; flex-direction: column; //设置y轴为主轴 }
justify-content 设置主轴上子元素的排列方式 (默认为 flex-start)
div { display:flex; justify-content:space-around //让子元素平分剩余空间 justify-content:center //让子元素居中对齐 justify-content:space-between; //先两边贴近 然后再评价分配 }
flex布局中,默认的子元素是不换行的,如果装不开,会缩小子元素的宽度,放到父元素里
flex-warp (默认是nowrap,即不换行)
flex-warp: warp; //超出会换行
align-items 设置侧轴上的子元素排列方式(单行)
div { display: flex; justify-content:center; //默认x是主轴(row)居中, 则侧轴为y align-items: center; //侧轴居中 }
align-content 设置侧轴上的子元素的排列方式(多行,单行无效)
div { display:flex; flex-warp: warp;//有了换行,此时我们的侧轴上控制子元素的对齐方式我们用align-content align-content:space-between; //贴着侧轴两边,其他平均分配 align-content:space-around; //平均分配 }
align-content 和 align-items 区别
flex-flow
div { display:flex; flex-direction: column; //主轴为y flex-wrap: wrap; //可换行 //把主轴方向和是否换行(换列) 简写 flex-flow: row wrap; }
总结flex布局父项属性总结:
- flex-direction: 设置主轴方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap: 设置子元素是否换行
- align-content: 设置侧轴上的子元素的排列方式(多行)
- align-items: 设置侧轴上的子元素排列方式(单行)
- flex-flow:复合属性,相当于设置了 flex-direction 和 flex-wrap
flex布局子项常见属性:
flex 定义子项目分配剩余空间,flex来表示占多少分
section { display: flex; width: 60%; height: 150px; background-color:pink; margin:0 auto; } // 左右固定 中间自适应! section div:nth-child(1) { width:100px; height:150px; background-color:blue; } section div:nth-child(2) { flex:1; //默认是0 background-color:green; } section div:nth-child(3) { width:100px; height:150px; background-color:blue; } <section> <div></div> <div></div> <div></div> <section>
align-self 控制子项自己在侧轴上的排列方式
div { display:flex; } div span:nth-child(3) { align-self: flex-end; // 让此盒子单独脱离组织自己行动 } div span:nth-child(2) { order:-1; // 移动自己,靠前排序, 默认是0, 越小越靠前 } <div> <span> 1</span> <span> 2</span> <span> 3</span> </div>
less+rem+媒体查询布
基础
-
基础
rem基础:
- em 是相对于父级的字体大小单位
- rem是相对于html的字体大小单位
- rem优点是通过修改html里面的文字大小来控制整体大小
媒体查询:
@media
@media screen and (max-width:800px){ //在屏幕上 并且最大宽度是800px 设置我们想要的样式 body{ backgrond-color:pink; } }// 可以根据不同屏幕尺寸改变不同样式
- 样式有重叠性,后面会覆盖前面的, ‘screen’ ‘and’ ‘px’ 必须带上
引入资源:(最好是从小到大,针对不同屏幕尺寸,调用不同css文件)
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"> <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
less基础:
.less 文件 , 在vscode 安装less 插件即可转换为.css, 然后在html中引用
@color:pink; //必须有@前缀,不能包含特殊字符,不能以数字开头,大小写敏感 body { background-color:@color; }
也可以嵌套写
.header { width:200px; height:200px; background-color:pink; a{ color:red; &:hover{ //写伪类选择器 必须加&, 否则默认为后代选择器 color:blue; } } }
less运算
@border:5px +5; @baseFont:15px; div { width:200px - 50; //运算符左右两侧加空格! height:(200px + 50px) * 2; //2个数参与运算,只有一个数有单位则以这个单位为准 border: @border solid red; background-color:#666 - #222; } img { width:82rem /@baseFont; //如果2个都有单位,且不同单位,以第一个单位为准! height:82rem /@baseFont; }
适配方案
-
适配方案
使用方案二:
- 无需设置各种尺寸的@meta,flexible.js 是分刮10等分
- cssrem插件自动将px 转化成rem,默认的html大小是 16px,要在设置的json里或者搜cssroot,自定义默认值
- 不需要用less,直接在css中写
- 顶部要加这个:
将less文件 导入进less文件中
@import "xxx" ; //可以不加后缀名
响应式页面兼容移动端(bootstrap)
概念
bootstrap框架:
- xs 超小屏幕
- sm 小屏幕
- md 中屏幕
- lg 大屏幕
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
bootstrap栅格系统:
- .container自动分为12列
bootstrap使用
- bootstrap使用
<div class="container">
<div class="row">// 大屏幕下排列方式 前缀是.col-lg-xx
<div class="col-lg-3">1</div>//一个占3份,一共12份,超出则另起一行
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
</div>
列嵌套(每个列里面 还会看成12等分)
.row>div {
height:50px;
background-color:pink;
}
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row"> //列嵌套里面最好加个row,就可以去掉父元素padding值
<div class="col-lg-6">1</div>
<div class="col-lg-6">2</div></div>
</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>
</div>
列偏移: col-md-offset-*
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-4 col-md-offset-4">右侧</div> //往右走偏移四等分
</div>
<div class="row">//一个盒子的话 居中则偏移(12-8)/2
<div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>
</div>
列排序 .col-md-push-* 和 .col-md-pull
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8" >左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
在某屏幕下隐藏或显示
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我要显示了!</span> //只有大屏幕才显示
</div>
<div class="col-xs-3">1</div>
<div class="col-xs-3 hidden-md">我要隐藏啦!</div>
<div class="col-xs-3">1</div>
</div>
</div>
流式布局
- 流式布局(百分比布局)
总结
渐变色(小拓展)
背景颜色渐变 linear-gradient(起始方向,颜色1,颜色2,…)
background: -webkit-linear-gradient(left,red,blue); //浏览器必须加前缀
background: -webkit-linear-gradient(left,red,blue); //从左到右 红到蓝色渐变
background: -webkit-linear-gradient(red,blue);//默认从上往下渐变
background: -webkit-linear-gradient(top left,red,blue);//左上角 到右下角渐变