移动端-响应式布局初涉


响应式布局五个基本点

  1. 媒体查询
  2. 移动端对应的设计图
  3. 隐藏某些在PC端需要的元素
  4. 添加meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  1. 交互方式与PC端不同,没有hover、滑动效果、滚动条、resize。替代的是touch和使用两点坐标来模拟滑动效果。

媒体查询

通常响应式布局有几个尺寸,320px(small)、375px(medium)、425px(large)、768px、1024px、1440px、2560px

使用style标签进行查询

@media (max-width: 320px) {
        body {
          background: red;
        }
      }

      @media (min-width: 321px) and (max-width: 375px) {
        body {
          background: green;
        }
      }
      @media (min-width: 376px) and (max-width: 425px) {
        body {
          background: blue;
        }
      }
      @media (min-width: 426px) and (max-width: 768px) {
        body {
          background: purple;
        }
      }
      @media (min-width: 769px) {
        body {
          background: orange;
        }
      }

使用link标签加载所需的尺寸的css

<link rel="stylesheet" href="./medium.css" media="(min-width: 321px) and (max-width: 375px)">

上述标签的意思就是:只有在屏幕尺寸在321px-375px之间的时候medium.css才会生效

移动端单独的设计图

要想做移动端的适配,设计图必须单独给一份。

隐藏某些元素

手机的屏幕较PC端小,所以容纳的可视区域必然小,例如导航栏在PC端时可以完全显示,但是移动端只能显示一个按钮,不能完整的显示。

手机端不同于PC端的操作

手机端明显没有hover效果,采用click来模拟

// html部分
<button id="menu">菜单</button>
  <ul id="nav" class="nav">
  <li><a href="#">导航1</a></li>
  <li><a href="#">导航2</a></li>
  <li><a href="#">导航3</a></li>
  <li><a href="#">导航4</a></li>
  <li><a href="#">导航5</a></li>
</ul>
// css部分
.nav {display: none}
.nav.active {display: block}
//js部分
menu.onclick = function() {
    nav.classList.toggle('active')
}

上述代码中classList具有toggle方法,如果有某个类名就去掉,没有这个类名就加上。

js代码不应该去控制样式,应该只改变状态而已,样式改变交给css去控制。

viewport的作用

传统的移动端开发时会进行缩放,以国内主流的尺寸980px来进行缩放,如果不加viewport标签,可以通过以下方式来查看屏幕的宽度。

document.documentElement.clientWidth() // 980px

一些经常忘的小知识

清除浮动

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

绝对定位

position: absolute;
top: 10px;
left: 20px;
// 某个元素绝对定位了,位置是相对于它的某个position: relative的父元素

文章作者: 吴少林
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 吴少林 !
 上一篇
工作小结-2 工作小结-2
promise兼容IE11最近我开发的公司的竞赛网站被发现在IE11下排行榜无数据,但是在其他浏览器没问题,我然后打开控制台一看,发现了如下错误: 真是醉了,然后发现有三个可行的方案: 直接采用polyfill 在index.html
2019-07-22
下一篇 
编程思想杂谈 编程思想杂谈
面向对象 面向对象是老生常谈的一个话题了。 可以自定义数据类型,工具类、实体类、将代码细节进行封装,易于编程。 用函数来编程 首先参数一定要验证 把逻辑实现,并拆分代码 设计模式 单例 适配器 IOC 工程模式 do
2019-01-09
  目录