视口标签viewport

视口标签viewport
// 标准写法

// width viewport宽度 可设置device-width特殊值
// initial-scale 初始缩放比
// minimum-scale 最小缩放比
// maximum-scale 最大缩放比
// user-scalable 是否可缩放(yes/no)
物理像素/物理像素比
// 物理像素 分辨率
// 物理像素比 1px(开发像素)能显示的物理像素点的个数
// PC端 1px等于1个物理像素
// 移动端 1px等于2个物理像素
background-size
// 一般图片采用img 背景图采用background-image
// background-image引入图片需设置盒子宽高 盒子放入图片
// 移动端图片多倍图
// background-size:原图宽 / 倍率 auto;
// 图片若为精灵图 background-positin: 左定位 / 倍率 右定位 / 倍率

// background-size: 图片的宽度 图片的高度 | cover | contain;
// px/百分比(百分比为元素宽高百分比)
// cover 覆盖式等比例拉伸 图片完全覆盖元素宽高 不留空白区域 多余切割
// contain 等比例拉伸 宽或高完全覆盖元素 可能留空白区域
特殊样式
链接

a {
  /* 点击高亮背景 */
  -webkit-tap-highlight-color: transparent;
}

input {
/* ios加上才能给按钮和输入框自定义样式 */
   -webkit-appearance: none;
}

img,

你可能感兴趣的:(css,前端,html)