抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

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; }

评论