移动web开发笔记01

一，
1， 流式布局：width=100%；
2， Viewport：

<meta name="viewport"content="width=device-width,initial-scale=1.0,user-scale=1.0"/>

3， 清除点击高亮：
移动端特有的点击链接或者某区域时的高亮
定义高亮颜色：

    -webkit-tap-highlight-color:transparent ;
    -webkit-tap-highlight-color:red ;

4，设置所有的盒子的宽度以边框开始计算
为什么使用 border-box？ 加上以边框计算，无论怎样修改盒子的边框，都不会溢出屏幕。移动端采用流式布局（非固定像素布局），解决宽度溢出的问题。
※在没有对盒子宽度做任何设置情况下，它默认是内容开始计算的
（盒子添加边框后，页面会出现滚动条。）

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

5，清除input的设备自带样式

-webkit-appearance: none;/*组件默认的样式清空*/

6，pc端常用样式

    font-size: 14px;
    color: #333;
    font-family: "Microsoft YaHei"，"sans-serif";

二，
7，Viewport自动生成快捷键：
(meta:vp tab)
user-scale=no,不允许用户自动缩放，所以最大最小不需要。

8，模拟首页：
首页结构分析：1搜索栏，2轮播图，3导航栏，4商品区
●要求页面有一个100%的布局，但是有固定的最小宽度和最大宽度来装载，保证内容正常显示。
原因：
由于拉伸，页面内容会出现错位的情况，所以用最小宽度来保证内容正常显示。
一般给的图最大是640的图片，如果超过640会使图片失真，所以要限制最大宽度。

9，页面内容：
盒子屏幕居中+流式布局
一，主盒子：

min-width: 300px;/*300为了适配小屏幕设备 为了保持布局的正常*/
max-width: 640px;/*在行业当中 设计图一般是640px 如果不限制那么图片就会失真
position：relative；提前定义好，便于以这个盒子为父元素做的绝对定位相对定位。

二，顶部浮动搜索容器：
◆搜索框随着拉伸被拉伸
◆搜索栏固定在顶部
▼用form把input包围原因：
html：
在移动端 调用小键盘的时候 这样的一个结构 可以把enter按钮改变成搜索按钮。

<form action="#">
    <input type="seach" placeholder="文字提示"/>
</form>

css：
◆两边固定像素，中间搜索框百分百像素。
◆头部主盒子固定在顶部：position：fixed；

position: fixed;/*这里暂时不能实现功能固定顶部，因为fixed是以window为基准的，并不是以父盒子为基准*/

解决方式：把内容文字（a标签，搜索框，登录按钮等）放在一个盒子内，并且设置与body相同的样式，即可解决。

◆盒子是透明的，内容是不透明的：rgba（）；
◆加上left:0,top:0;才可以使整个盒子正常显示在大盒子居中。
③物理像素和图标模糊问题
3.01
切图：面对的问题：2:1比例既可以
如果1:1的显示在移动设备当中图标会失真。
1px的图片放大显示后，有毛边的图片一般都会失真，也就显示模糊。
比如：iphone4的分辨率是640*960的像素，640的分辨率显示成320的尺寸？2倍关系。
iphone6 plus的分辨率是1242，实际显示414尺寸，3倍关系。
物理像素越多，屏幕显示越细腻，越清晰。锚边显示的也就清楚，图标就会失真。
分辨率（物理像素：最小可视颗粒度）和真实尺寸的关系：
2个物理像素沾满1个px。

移动端有高清屏幕的存在，高清屏幕的分辨率和尺寸是不相等的，是2个分辨率显示1px的大小。

解决方法：
采用压缩图片尺寸：
1如果是img直接设置宽高压缩，
2如果是背景使用的是设置background-size方式压缩。
在行业中通用的设计稿是640px。
————————————————
css：
设置login登录按钮时，只设置position绝对定位，不占位置时，给父元素添加高度即可解决。

position: absolute;
top: 0;
right: 0;

跟用float:right有区别
————————————————
搜索框随着拉伸显示布局：
（一般公司无要求，用户大多以主流浏览器时，）
以百分比的方式设置伸缩布局：
1，form和input的宽度定义为100%。（设置的100%以父容器的内容计算。）
2，给form添加左右padding内边距，宽度扔占据100%，酱紫不会覆盖左右的内容。

    width: 100%;
    padding-left: 75px;
    padding-right: 55px;
    position: relative;

————————————————
所有使用精灵图的 clsss 以icon_开始的所有class都有这些属性

[class^="icon_"]{
    background: url("../images/sprites.png") no-repeat;
    /*压缩背景图,压缩一倍，原图片是400*400尺寸*/
    background-size: 200px 200px;
}

————————————————

三，轮播图
1，轮播图的无缝滚动：
pc端：滚动到最后一张图的时候，在尾部多设置一张跟第一张一样的图片。
移动端：滑动效果+首部放一张图片 （首位都加图片完成无缝滑动）