首页 > 代码库 > html5移动端知识点总结

html5移动端知识点总结

第一章,控制html字体大小

1.1使用媒体查询,不同分辨率设置不同的html的font-size

    @(min-width:320px){ html{font-size:10px;} }

   @(min-width:360px){ html{font-size:11.25px;} }

   @(min-width:400px){ html{font-size:12.5px;} }

   @(min-width:640px){ html{font-size:20px;} }

  优点:使用CSS即可实现,不需要JS代码
  缺点:只能匹配部分机型

1.2使用JS代码控制html的font-size大小

  var html = document.querySelector("html");

  var clientWidth = html.getBoundingClientRect().width;

  html.style.fontSize = clientWidth/18 + "px";

  优点:可以匹配所有的机型,适配很强
  缺点:需要写JS代码

第2章禁止a,button,input,optgroup,select,textarea等标签背景变暗效果

  在移动端使用<a>标签做按钮的时候或者文字链接的时候,点击按钮会出现一个“暗色的”背景,比如如下代码:

  <a href=http://www.mamicode.com/"">button1</a>

  <input type="button" value=http://www.mamicode.com/"提交"/>

  在移动端点击之后 会出现“暗色的”背景,这时候我们需要在CSS中加入如下代码即可:

  a,button,input,optgroup,select,textarea{

   -webkit-tap-highlight-color:rgba(0,0,0,0);

  }

第3章 meta基础知识点

3.1页面窗口自动调整到设备宽度,并禁止用户缩放页面

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

  属性基本含义:
  width=device-width:控制viewport的大小,device-width为设备的宽度
  initial-scale:初始化缩放比例
  minimum-scale:允许用户缩放的最小比例
  maximum-scale:允许用户缩放的最大比例
  user-scalable:用户是否可以手动缩放

第四章 webkit表单输入框placeholder的颜色值改变

  如果想要默认的颜色显示红色,代码如下: input::-webkit-input-placeholder{color:red}

  如果想要用户点击变为蓝色,代码如下: input:focus::-webkit-input-placeholder{color:blue}

  

html5移动端知识点总结