zoukankan      html  css  js  c++  java
  • 2018.09.03怎样让网页自适应所有屏幕宽度

    网页布局时容易有水平滚动条,滚动条滚动到右边时总是出现一大片空白,以下是解决这个问题的方法:

    1. 在网页代码的头部,加入一行viewport元标签。

      <meta name="viewport" content="width=device-width,initial-scale=1" />

      viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

    2.  

      由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。对图像来说也是这样。

      具体说,CSS代码不能指定像素宽度:

      xxx px;

      只能指定百分比宽度:

      xx%;

      或者

      auto;

    3.  

      字体也不能使用绝对大小(px),而只能使用相对大小(em)。

      例如:

      body {font: normal 100% Helvetica, Arial,sans-serif;}

      上面的代码指定,字体大小是页面默认大小的100%,即16像素。

    4.  

      流动布局(fluid grid)

      "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

      .main {float: right; 70%; }

      .leftBar {float: left; 25%;}

      float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

  • 相关阅读:
    C++ allocator
    C++操作符重载
    Theron (C++ concurrency library) 读后感
    第五章 [BX]和loop指令
    第四章 第一个程序
    第三章 寄存器(内存访问)
    第二章 寄存器
    第一章
    jquery下ajax异步执行操作笔记
    CSSFlex布局
  • 原文地址:https://www.cnblogs.com/sccwxl/p/9578969.html
Copyright © 2011-2022 走看看