美文网首页
web自适应开发

web自适应开发

作者: liwuwuzhi | 来源:发表于2019-07-13 22:50 被阅读0次

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(响应式断点)选择:
可参考 BootstrapSemantic 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{}

相关文章

  • web自适应开发

    1.浏览器内容 第三方浏览器有:sogo浏览器、360浏览器、qq浏览器、UC浏览器内核:360浏览器:Webki...

  • 手机网站项目开发注意事项

    1、要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的...

  • 自适应网页的实现

    1.自适应网页设计 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web...

  • 自适应网页设计

    一、自适应网页设计2010年,Ethan Marcotte提出自适应网页设计(Responsive Web De...

  • 前端-Bootstrap实现响应视频

    如果您不熟悉Web开发,请查看本文,了解如何利用Bootstrap在您的网页上创建自适应视频。 如果您在网站上使用...

  • 2018-12-10

    iOS开发-UITextView高度自适应

  • web自适应

    简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界...

  • 移动端Web App自适应布局探索与总结

    1、困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6...

  • HTML基础

    新的征程 web前端介绍 web前端开发做什么 pc端web开发;移动端web开发;混合app开发;网页游戏/移动...

  • Web版扫雷开发小记(3)

    前篇: web版扫雷开发小记(1)web版扫雷开发小记(2)web版扫雷开发小记(3)web版扫雷开发小记(4) ...

网友评论

      本文标题:web自适应开发

      本文链接:https://www.haomeiwen.com/subject/pscvkctx.html