web自适应开发

2019-07-13 本文已影响0人 liwuwuzhi

1.浏览器内容

第三方浏览器有：sogo浏览器、360浏览器、qq浏览器、UC浏览器
内核：
360浏览器：Webkit和 Trident
qq浏览器：x5内核（基于开源内核Webkit开发）
UC浏览器：u3内核（基于开源内核Webkit开发）
sogo浏览器：sogo浏览器有高速模式（Webkit）和兼容模式（Trident）
x5内核：
X5内核是腾讯基于优秀开源Webkit深度优化的浏览器渲染引擎。为QQ浏览器、微信、手机QQ等2万多家App提供稳定安全的增强浏览服务,目前已经成为中国移动互联网上Web端事实上的标准

2.媒体查询

21.viewport（视口）：
a: layout viewport (布局视口 ,可理解为页面宽度）
b: visual viewport （可视视口，可理解为屏幕大小）
c: ideal viewport （理想视口）
那在移动端上的自适应，我们要做的就是使布局视口和可视视口大小一致，这样的话用户就可以不用手动的去缩放页面啦。
而能起到这个作用的代码就是：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2.2 mediaquery （媒体查询）：

2.3 屏幕 Breakpoint（响应式断点）选择：
可参考 Bootstrap 和 Semantic UI

如何使用呢？有两种使用方式，link 标签引入，或者直接在style样式里设置。
以设计一个适应手机、ipad、pc 端的布局为例
1.link 标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>

    <link rel="stylesheet" href="./css/main.css" type="text/css" media="screen and (min-width:993px)" />
    <link rel="stylesheet" href="./css/ipad.css" type="text/css" media="screen and (min-width:769px) and (max-width:992px)"/>
    <link rel="stylesheet" href="./css/iphone.css" type="text/css" media="screen and (max-width:768px)"/>
</head>
<body>
    <div class ="container">
          <header class="header">header</header>
          <main class="main">main</main>
          <footer class="footer">footer</footer>
    </div>
</body>
</html>

此时在 main.css 、ipad.css 、iphone.css 样式文件设置相应布局需要的样式就可以了，需要注意的是，后面引入的样式会覆盖前面的样式，上面例子中，如果 main.css 和 iphone.css 都对同一个class 做了设置，那么 iphone.css 会覆盖main.css的。
例如：

// main.css
.container{
  width: 100%;
}
.header{
  height: 200px;
  background: #f00;
  font-size: 24px;
  font-weight: 600;
  color: #555
}
.main{
    background: #00f;
}
.footer{
   height: 100px;
   background: #0f0;
}

// iphone.css
.header{
  height: 60px;
  font-size: 13px;
}
.footer{
   height: 60px;
}

利用这个特性，如果我的网站时以pc端为主的，那么我的样式设置大多都写在main.css 下，而iphone.css 只是重置一些在手机屏幕下的适配的修改。

2.在style中引入

    <style>
        .container{
          width: 100%;
        }
        .header{
          height: 200px;
          background: #f00;
          font-size: 24px;
          font-weight: 600;
          color: #555
        }
        .main{
          height: 1000px;
          background: #00f;
        }
        .footer{
          height: 100px;
          background: #0f0;
        }
         // ipad
         @media screen and (min-width: 769px) and(max-width:992px){ 
            .header{height: 80px;font-size: 16px;}
            .footer{height:80px;}
    
        }
        // iphone
        @media screen and (max-width: 768px){ 
            .header{height: 60px;font-size: 13px;}
            .footer{height:60px;}
    
        }
    </style>

当然也可以把media 分开写，例如

    <style>
        .container{
          width: 100%;
        }
        .header{
          height: 200px;
          background: #f00;
          font-size: 24px;
          font-weight: 600;
          color: #555
        }
        @media screen and (min-width: 769px) and(max-width:992px){
            .header{height: 80px;font-size: 16px;}
        }
        @media screen and (max-width: 768px) {
            .header{height: 60px;font-size: 13px;}
        }


        .footer{
          height: 100px;
          background: #0f0;
        }
        @media screen and (min-width: 769px) and(max-width:992px){
            .footer{height:80px;}
        }
        @media screen and (max-width: 768px) {
            .footer{height:60px;}
        }
    </style>

个人更倾向于这样分开写，这样后期维护的话特别时在一些比较大的项目中样式特别多的时候，每个样式的适配都写在同一块，就不用满页面的去搜索了。
注意：media加单位px才生效

3.记一些乱七八糟的

项目文件：
humans.txt //网站信息（开发）
robots.txt //网站信息（搜索引擎）// Useer-agent:(爬虫) 、 Disallow:/admin/

.gitkeep //需要版本管理的文件
.gitignore //不需要版本管理的文件
例如：操作系统生成的文件（DS_Store、MasXOS）
日志文件
IDE的原始文件（idea）
node_module
等...

LICENSE.txt // 版权声明、协议内容
CHANGLOG.md // 项目每个版本的更新（说明版本号、更新内容、修复问题）
README.md // 项目简介、使用方式、相关连接
readme.md 结构：

Getting Started:

Welcome

New Features

Compatibility（兼容性）

Library

Files included （文件结构）

Dependecies（依赖项）

4.记一些乱七八糟的

font-size下限： chrome浏览器下英文 10px、中文12px
font-line 下限： chrome浏览器下英文10px 、中文12px (所以行高不推荐用rem来设置)

设 ul.content .item
选中除第一个item以外的其他item: ul.content .item + .item{}