移动端适配之简易导航头实战

简易导航头实战

涵盖技术点

html、css
vw + rem 单位适配
px、 rem、 vw 单位之间的转换

步骤

效果图

处理html

视口设置：宽度为设备宽度，设置字体不能被缩放
引入css文件

构建导航头的骨架

菜单和登录是a标签
导航图标是h1标题

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Nav</title>
      <link rel="stylesheet" href="./index.css">
   </head>
   <body>
      <header>
         <a href="#" id="menu">菜单</a>
         <a href="#" id="login">登录</a>
         <h1 id="logo">Ellen.com</h1>
      </header>
   </body>
</html>

设置css 重点

清除浏览器的基础默认样式，参考1-24行
- 其中浏览器特有 -webkit-text-size-adjust: none; 禁止文字缩放
- 按钮文本框点击时候出现的高亮:-webkit-tap-highlight-color: rgba(0,0,0,0);
- ios下的按钮圆角清除：-webkit-appearance: none; border-radius: 0px;
重点设置html 基础 font-size 值
- 未来方便计算通常把100px = 1rem 作为rem的基准值
- 假设设计图宽度为750px, 则7.5rem = 100vw = 1.0可视区宽度
- 得出基础 font-size 的vw值为：100vw / 7.5rem = 13.3333333...vw。充分考虑兼容性的情况下可以写：font-size: calc(100vw /7.5);
设置浏览器默认字体大小
- 根据设计图来设置字体的默认大小：font-size: .24rem;
设置元素、图片宽高
- 元素基于100px = 1rem 这个基础值来换算rem 单位，例如下列代码中菜单宽度为80px 所以我们得出0.8rem
- 图片的大小是固定的，所以如果想让图片也做适配就要给图片设置宽高。例如54行中图片的宽高是宽40px 高35px，那么就要改成.4rem .35rem。那么图片就会根据视口的大小而改变啦。

body{
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,p{
    margin: 0;
    /*禁止文字缩放*/
    -webkit-text-size-adjust: none;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: top;
}
a,button,input{
    /*点击时候高亮操作*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    border-radius: 0px;
/*    ios 按钮有圆角，把他干掉*/
}
html{
/*    rem 基础值: 100px = 1rem 当前宽度750px
      则7.5rem = 100vw = 1 可视区宽度
      则font-size = 100vw / 7.5rem = 13.3333333...
*/
    font-size: calc(100vw /7.5);
}
body{
    font-size: .24rem;
}
    
header{
    position: fixed;
    left: 0;
    top: 0;
    width: 7.5rem;
    height: .9rem;
    background-color: #323436;
    overflow: hidden;
}
#menu{
    position: absolute;
    left: 0;
    top: 0;
    width: .8rem;
    height: 0;
    background: url("img/meun.png" )no-repeat center;
    padding-top: .9rem;
    background-size: .4rem .35rem;
}
#login{
    position: absolute;
    top: 0;
    right: 0;
    width: .8rem;
    height: 0;
    padding-top: .9rem;
    background: url("img/login.png" )no-repeat center;
    background-size: .5rem .52rem;
}
#logo{
    width: 7.5rem;
    padding-top: .9rem;
    background:url("img/logo.png") no-repeat center .27rem;
    background-size: 1.83rem .44rem;
}

插一句

初步接触移动端适配的童鞋可以，试试这个简单的小demo，去做快速熟悉移动端的适配，以及三个单位之间转换。完整的代码demo会后续上存中~~搬砖人冲鸭！！！

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。