移动端网页

视口

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

CSS初始化规范

Normalize.css

可网上下载。

按钮样式

• 去除按钮高亮
  • -webkit-tap-highlight-color : transparent;
• 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
  • -webkit-appearance : none;
• 禁用长按页面时的弹出菜单
  • img，a{-webkit-touch-callout:none；}

流式布局(百分比布局)

• max-width 最大宽度（max-height 最大高度）

• min-width 最小宽度（min-height 最小高度）

rem布局

• em：父元素的字体大小
  • 如果父元素的字体大小为12px，则子元素宽度设置10em相当于12*10px=120px
• rem：html元素的字体大小
  • html标签的元素为14px,则某元素宽度10rem相当于14*10px=140px

媒体查询

/*
这句话的意思就是：在我们屏幕上，并且最大宽度是 800像素 设置我们想要的样式
max-width 小于等于800
媒体查询可以根据不同的屏幕尺寸改变不同的样式
*/
@media screen and(max-width:800px){
  body{
    background-color:pink;
  }
}
@media screen and(max-width:500px){
  body{
    background-color:purple
  }
}
复制代码

媒体查询引入文件

<style>
/*
当我们屏幕大于等于 640px以上的，div 一行显示两个
当我们屏幕小于640px，div 一行显示一个
一个建议：媒体查询最好的方式从小到大
*/
</style>
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
复制代码

Less预处理语言

后缀名：.less

• 声明变量

  • @key:value;
  • 不支持数字开头，不包含特殊符号，严格区分大小写

• 编译

  • 在VScode中，下载插件easy less，安装完毕，每次保存less文件时，会在同目录下生成或更新同名css文件

• 嵌套

  .header{
    width:200px;
    height:200px;
    background-color:pink;
    /* 1.less嵌套 子元素的样式直接写到父元素里面就好了 */ 
  }
  a{
    color:red;
    /* 如果有伪类、交集选择器、伪元素选择器，我们内存选择器的面前需要加& */
    &:hover{
      color:blue;
    }
  }
  复制代码

• 运算符

  • 我们运算符的左右两侧必须敲一个空格隔开
  • 两个数参与运算如果只有一个数有单位，则最后的结果就以这个单位为准
  • 两个数参与运算，如果2个数都有单位，而且不一样的单位最的结果以第一个单位为准

• less导入less

  • @import '路径'
  • 可省略后缀名

• rem适配方案1

  • 自己划分，自己设置rem

• rem适配方案2

  • flexible.js，划分为10块

• px->rem单位

  • vscode 下载cssrem
  • 可以在User-Settings中修改cssrem.rootFontSize修改html字体大小