经典布局

在这里插入图片描述

适配问题

移动端主要问题

适配问题，即不同终端，屏幕尺寸不一样

相比于pc端，pc端主要是关注兼容性问题，而移动端是适配问题。

解决方法

在这里插入图片描述

一般在pc端的web 放在移动端，viewport会自动缩放，不会出现滚动条原长宽显示

【pc端的宽度一般默认是980px 的原因：即默认最小的pc端的宽度是980px，如果本来是1300，然后碰到1000px的屏幕，就会出现滚动条】

1.非主流方案：

在这里插入图片描述
第9、10原因：假设一个像素10kb质量就好，在2:1比例的屏幕像素比中，需要准备一个20kb的照片，然后分到每个像素就是10kb，这样，不同比例，就要准备不同质量的照片

2.主流方案要求：满足以下则可达到了适配 — 标准的移动端适配方案

为了不出现滚动条：网页宽度必须和浏览器保持一致
为了防止出现下图情况，默认显示的缩放比例和pc端保持一致（缩放比例1.0）
不允许用户自行缩放网页

方案：流动布局+viewport

流动布局
viewport 视口

放到移动端视，viewport会自动把页面整体缩放，也包括把图片缩放。

方案：

meta:vp 快捷键

结果适配：
在这里插入图片描述

web移动端的特点

不建议使用jquery 而使用zepto.js（基于高版本的浏览器库）

jquery 在移动端太冗余了
在这里插入图片描述

重置css：

margin padding 清0
元素均设置为border-box
a链接高亮清0，下面的属性是移动端特有的

整个reset.css代码入下：

/*=======reset css========*/
*,
*::before,
*::after{
    /*所有的标签，和伪元素都选中*/
    margin: 0;
    padding: 0;
    /*移动端常用布局是非固定像素*/                /*这是移动端特有的样式属性*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;     
    /*点击高亮效果的清除*/                       /*这是移动端特有的样式属性*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;        /*如果没有微软雅黑，就默认用浏览器自己的*/
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;    /*text-decoration 属性规定添加到文本的修饰。例如下划线等*/
    color: #333;
}
input,textarea{
    border: none;
    outline: none; 
    /*不允许改变尺寸  针对textarea框右下角有一个可以改变尺寸的x点*/
    resize: none;   
    /*元素的外观  none没有任何样式    可选项例如button，即用button的外观*/
    -webkit-appearance: none;                /*这是移动端特有的样式属性*/
}

web移动端-1