meta标签

为使网站在移动端有理想的阅读宽度，需添加meta标签。

meta标签的目的：使布局视口的宽度与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
  • width - viewport的宽度，width=device-width页面适应设备宽度
  • initial-scale - 初始的缩放比
  • minimum-scale - 允许用户缩放到的最小比例
  • maximum-scale - 允许用户缩放到的最大比例
  • user-scalable - 用户是否可以手动缩放，yes or no（1或0）

二倍图

物理像素&物理像素比

CSS 像素：又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。 iPhone 6 的 CSS 像素数为 375 x 667px。

物理像素：指屏幕显示的最小颗粒从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。 iPhone 6 的物理像素为 750 x 1334

物理像素比：物理像素 / CSS 像素，这里的 CSS 像素其实是理想视口。iPhone 6 物理像素为 750 x 1334，理想视口 375 x 667 ，DPR = 2

对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，会造成图片模糊。在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。

背景缩放background-size

background-size 属性规定背景图像的尺寸

1
background-size: 背景图片宽度 背景图片高度;

单位可以是 长度、百分比、cover、contain;

移动端开发

常见布局

移动端单独制作

  • 流式布局（百分比布局）
  • flex 弹性布局
  • less+rem+媒体查询布局
  • 混合布局

响应式

  • 媒体查询
  • bootstarp

css3盒子模型

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

CSS3盒子模型：盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

CSS3中的盒子模型， padding 和 border 不会撑大盒子

1
2
3
4
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

特殊样式

1
2
3
4
5
6
7
8
9
/*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; }