移动端布局

   <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

视口 

viewport 就是浏览器显示页面 内容的屏幕区域；可分为布局视口；视觉视口；理想视口

布局视口 pc上网页大多能在手机上显示；但是元素看上去很大

视觉视口 手机上能够看到的区域；元素很小；我们通过缩放来操作视觉视口；但不会影响布局视口

理想视口 布局宽度和视觉宽度一致

 <meta name="viewport" content="width=device-width,布局宽度和视觉宽度一样user-scalable=no,是否缩放 initial-scale=1.0" 缩放比>

 二倍图

物理像素（分辨率）是真实存在的

px 是物理像素比

在移动端1px不一定等于一个物理像素

 我们需要一个50*50px像素的图片 直接放到ipone里面会放大两倍100*100像素遍的模糊

我们采用的是一个放100*100像素图片 然后手动的把这个图片缩小为50*50px像素

我们准备的图片比我们实际需要的大小大两倍 这就是二倍图

背景缩放

background-size：宽度，高度

只有一个参数会等比例缩放

如果单位是百分比；是相对于父盒子来说的

cover 是图片把div盒子完全覆盖 图片可能显示不全

contain 图片的宽度高度等比拉伸；当宽度或者高度铺满div盒子不能在拉伸时 图片可能会有空白区域

移动daunt开发选择

css初始化 normalize.css

特殊样式

css盒子模型

box-sizing：border-box

padding和border不会撑大盒子

当我们点击高亮时 我们需要清除设置透明

-webkit-tap-highlight-color:transparent

当移动浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式

-webkit-appearance:none;

禁用长按页面弹出菜单

-webkit-touch-callout:none

流式布局

百分比布局；固定布局；像素布局

通过盒子的宽度设置成百分比来根据屏幕的宽度进行拉伸

通过max-width 最大宽度和min-width最小宽度来限制

京东案例知识点

对于行内快元素 使用line-height默认跟文字的基线对齐 所以要加vertical-align：middle 图片自带的边距也用这个解决

垂直外边距：

在网页中相邻的垂直方向的外边距会发生边距重叠

外边距重叠指兄弟之间的相邻外边距回去最大值;不是取和

父子之间垂直外边距相邻了;则子元素的外边距会设置给父元素

内联元素可以设置水平内边距 可以设置内边距但不会影响布局

内联元素可以设置水平外边距 但是不可以设置垂直外边距

二倍精灵图

在firework里面把精灵图等比例缩放原来的一半

之后根据大小测量坐标

注意代码里面background-size也要写 精灵图原来宽度的一半

弹性布局

flex是弹性布局 任何一个容器都可以指定弹性布局

我们为父盒子设置flex布局候；子盒子的flot，clear和vertical-align属性失效

采用flex布局的元素;被称为flex容器;它的所有子元素自动成为容器成员;成为flex项目

原理

就是通过给父盒子添加flex属性;来控制子盒子的位置和排列方式

 

 

 

 

 

 flex布局中;默认的子元素不会换行;如果装不开会缩小子元素的宽度放到父元素中

flex子项常见的属性

flex分配剩余空间;用flex来分配占多少份

align-self 控制子项自己在侧轴上的排列方式

order 控制子项在主轴上的排列顺序 默认为0 越小越靠前

携程网移动首页知识点

搭建文件夹

初始化样式

图片保存出现@2x表示二倍图

 not选择器

 E:not() 排除这个元素下不是用这个样式的元素

background: url("../images/hotel.png") no-repeat bottom center; 可以指定背景颜色的位置

  background: linear-gradient(方向,起始颜色,末尾颜色)

less+rem+媒体查询布局

以前的流式布局和flex布局主要针对宽度的

em单位主要是相对于父元素字体

rem是相对于html元素的字体大小

优点 可以通过修改html中的文字大小修改页面的元素大小可以整体控制

媒体查询

针对不同的屏幕设置不同的样式

 

 媒体查询一般从小到大排序

screen还有and必须带上

单位必须带上

引入资源就是针对不同的屏幕尺寸引入不同的资源

less

css冗余比较高

css没有很好的计算能力

less是css的预处理语言

通过easyLess把less文件编译成css文件

less可以定义变量

可以计算

 如果有伪类,交集,伪元素选择器 我们内层选择器的前面需要加&

 rem实际开发的适配方案

可以根据屏幕的大小自适应元素的大小

使用rem不需要考虑二倍图

 其于屏幕元素的大小用结果除以html中的字体大小

 

  /* 去除输入框的输入时边框*/

  outline: none;

 浏览器前缀