阅读 338

移动端网页

视口

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码
属性解释说明
width宽度设置的是viewport宽度,课题设置device-width特殊值
initial-scale初始缩放比,大于0的数字
maximum-scale最大缩放比,大于0的数字
minimum-scale最小缩放比,大于0的数字
user-scalable用户是否可以缩放,yesno(01)

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
  • remhtml元素的字体大小
    • 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字体大小
文章分类
前端
文章标签