首页 HTML5移动端正文

移动端布局方式----热门贴

今天给大家讲一下移动端的布局,移动端布局考虑的因素不同于PC端浏览器兼容,而是更为严谨的手机分辨率适配问题,

关于这个就不叫蛋疼了,下面说一下在移动端布局前,需要掌握的一些必备知识。

必备知识

PC盒子模型:

    盒子宽度 = width+padding+border

移动端布局新增了一个css3属性box-sizing,解决了这个问题

    box-sizing:border-box;   padding,border向内增加

    box-sizing:content-box; padding,border 向外增加  //默认

calc计算:

    这个css3的属性为我们省去了很多关于计算的问题了,再也不用担心除不尽分配了。

    calc定义了简单的加减乘除运算

calc()
   + - * /

   calc(200px + 10px)
   calc(200px - 10px) √

   calc(20px * 10px)   挂了
   calc(20px * 10)        √

   calc(200px / 2)

   calc(100% - 30px)
  // 注意:空格

问:左侧固定宽,右侧自适应的方式?

  1. 左侧浮动定宽,右侧margin-left

  2. calc计算

  3. -webkit-box布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            display: -webkit-box;
        }
        .wrap div{
            height:300px;
        }
        .wrap div.left{
            width:200px;
        }
        .wrap div.right{
            -webkit-box-flex: 1;
        }

    </style>
    <script>

    </script>
</head>
<body>
<div class="wrap">
    <div class="left" style="background: rgba(0,0,0,0.5)"></div>
    <div class="right" style="background: #ff42d0"></div>
</div>
</body>
</html>

弹性盒子

不必关心子级个数,根据父级宽高进行平分

父级:

    display:-webkit-box;

子级:

    -webkit-flex-box:1;(正数)

                  系数

父级分宽度,先减去固定宽,再分系数;

*注意子级一定不能浮动,必须是个行内块元素

弹性方向:

-webkit-box-orient:

    horizontal;水平

    vertical;垂直

弹性排列方式:

    -webkit-box-direction:reverse;//倒着排序

居中方式:

    水平: -webkit-box-pack:center;

    垂直:-webkit-box-align:center;

下面模拟一个手机布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机布局</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            height:100%;
            overflow: hidden;
        }
        .wrap{
            height:100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .wrap header,.wrap footer{
            height:40px;
            background: #399;
            text-align: center;
            color: #fff;
        }
        .wrap section{
            -webkit-box-flex: 1;
        }

        header h1,header menu{
            width:50px;
            background: #ff4075;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
        }
        header,nav{
            display:-webkit-box;
        }
        header div{
            -webkit-box-flex: 1;
        }

        nav a{
            -webkit-box-flex: 1;
            display: block;
            height:40px;
            color: #fff;
            text-decoration: none;
            line-height: 30px;
        }
    </style>
    <script>

    </script>
</head>
<body>
    <div class="wrap">
        <header>
            <h1>LG</h1>
            <div>header</div>
            <menu>菜</menu>
        </header>
        <section>section</section>
        <footer>
            <nav>
                <a href="javascript:;" style="background: #ff42d0">首页</a>
                <a href="javascript:;" style="background: #ffb213">导航</a>
                <a href="javascript:;" style="background: #ff4075">新闻</a>
                <a href="javascript:;" style="background: #5c9950">列表</a>
            </nav>
        </footer>
    </div>
</body>
</html>

    

移动端的一些meta

移动端布局必须增加:
   <meta name="viewport" content="width=320">
   
   <meta name="viewport" content="width=device-width">       

   <meta name="viewport" content="width=device-width, user-scalable=no">

   √<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
      width=device-width 视窗大小
      user-scalable=no   不允许用户缩放页面
      initial-scale=1.0       初始缩放比例

      maximum-scale=1.0  最大缩放比例
      mininum-scale=1.0       最小缩放比例
   ------------------------------------------
   苹果专有:
   允许以app方式进行浏览器网页 -> 添加到主屏幕
   <meta name="apple-mobile-web-app-capable" content="yes">

   bar的样式
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

   --------------------------------------------
   
   禁止识别电话号码、邮箱:
   <meta name="format-detection" content="telephone=no,email=no">
   
   点击允许全屏展示:
   <meta content="yes" name="apple-touch-fullscreen"/>
   保留系统配置:
   <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
   
   ----------------------------------------------
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">   √
<!-- 尽量用IE最新模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> √

<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

移动端布局

一.流体布局

100%+float布局

calc+box-sizing

这里的图片设计需要大,不然就会失真。

宽高计算:

    1.不管,让子级元素撑起来

    2.小元素可以定死   font-size


相关网站:携程

http://m.ctrip.com/html5/

优点:适应所有手机

缺点:设计师没什么用处,做出来的东西和设计图不匹配


二.定宽布局

  1. 直接切,和PC一模一样

    缺点:两边会留白

    2.min-width,max-width

    min-width:320

    max-width:640


宽高匹配方式和流体布局一样


相关网站:京东


三.相对单位布局

以下是常见的相对单位

%  ->  相对的父级宽度
em ->  相对的父级字体大小

vw  -> viewport width  相对的窗口宽度

   1vw=viewport*1%
vh ->  viewport height 相对窗口高度
   1wh=viewport*1%

vmin -> viewport heihgt 和 viewport width里面挑最小的
vmax -> 相对的最大

rem:  root element of font size  相对html字体大小

这里用rem进行布局,下面说一下rem


chrom默认字体大小是16px

html{

font-size:10px;/**chrome最小为10px*/

}

html{

font-size:62.5%;/***10px**/

}

除不尽的话保留2位小数


怎样最好的定义html的字体大小呢?

这里需要找一个目标点,

比如320

20    ----------   320

?    ----------    可视区

window.onload=window.onresize=function(){
     document.documentElement.style.fontSize=20*document.documentElement.clientWidth/320+'px'
};


设计图一般是2倍图,3倍图

640 960

375 750   1125

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem模拟手机布局</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html{
            font-size: 20px;
        }
        .wrap{
            width:16rem;
            margin: 0 auto;
        }
        .wrap header,.wrap footer{
            width:16rem;
            font-size: 1rem;
            background: #399;
            text-align: center;
            color: #fff;
            text-shadow: 0.05rem 0.05rem 0.25rem #000;
        }
        .wrap ul{
            overflow: hidden;
        }
        .wrap ul li{
            background: #ff42d0;
            float: left;
            width:5rem;
            height:5rem;
            margin: 0.1rem;
            border-radius: 1rem;
            text-align: center;
            line-height: 5rem;
            color: #fff;
            text-shadow: 1px 1px 5px #000;
        }
        .wrap ul li:nth-child(odd){
            background: #ffe249;
            float: left;
            width:5rem;
            height:5rem;
            margin: 0.1rem;
            border-radius: 1rem;
            text-align: center;
            line-height: 5rem;
            color: #fff;
            text-shadow: 1px 1px 5px #000;
        }
        a{
            color: #ffffff;
        }
        .wrap footer{
            position: fixed;
            left:0;
            bottom:0;
        }
    </style>
    <script>
        window.onload=window.onresize=function(){
            document.documentElement.style.fontSize=20*document.documentElement.clientWidth/320+'px'
 };
    </script>
</head>
<body>
    <div class="wrap">
        <header>
            header
        </header>
        <section>
            <ul>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </section>
        <footer>
            footer
        </footer>
    </div>
</body>
</html>

四.响应式布局(媒体查询)

目的:一套页面适应各种设备

css中可以写if语句

@media (width:400px){
           #div1{
               background: red;
           }
       }
//小于等于400
 max-width:400px    
//大于等于400 
 min-width:400px;
 
// 400-800之间
             
 @media (条件1) and (条件2){
                  
 }
原理:样式覆盖,写后面, 从大往小
<link rel="stylesheet" href="pad.css" media="(max-width:600px)">


最后评价一下这个  :鸡肋没用

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论