一、移动 web 开发与适配
1、跑在手机端的 web 页面(H5 页面)
2、跨平台(PC 端、手机端 - 安卓、IOS)
3、基于 webview(终端开发技术的一个组件)
4、告别 IE 拥抱 webkit(移动端的手机 webview 基本上都是 wenkit 内核)
5、更高的适配和性能要求(手机屏幕尺寸复杂、网络状况复杂)
 
二、常见移动 web 适配方法
PC:
    960px/1000px 居中
    盒子模型、定高、定宽
    Display:inline-block
 
移动 web:
    定高、宽度百分比(百分比布局只能做一些很简单的屏幕适配,能适配的移动端布局方案很少)
    flex
    Media Query(媒体查询)
 
其中 flex 与 Media Query(媒体查询) 就可以实现响应式布局
 
Media Query(媒体查询)
使用方法1:
<style type="text/css">
 
      /* 屏幕最大 width 为 320px 时  即屏幕小于等于 320px 时  */
      @media screen and (max-width: 320px) { /* css */ }
       
      /* 屏幕最小 width 为 321px 时  即屏幕大于于等于 321px 时  */
      @media screen and (min-width: 321px) { /* css */ }
 
</style>
 
媒体类型:screen,print...        媒体特性:max-width,max-height...

 

使用方法2:
    <link rel="stylesheet" type="text/css" href="" media="screen and (max-width: 320px)">

 

 
响应式布局
即一套前端代码可以针对不同机型;比如 IPhone 和 iPad 
 
 
posted on 2019-04-21 21:03  渐行渐远ls  阅读(119)  评论(0编辑  收藏  举报