zoukankan      html  css  js  c++  java
  • 网页自适应PC端和移动端

    如何让网页自动适应PC端和移动端
    只需增加这么一行:<meta name="viewport" content="width=device-width, initial-scale=1.0">
    • viewport是view portion的意思,用汉语说,就是“可见区域“。所以这个标签是在定义可见区域的规则。
    • width=device-width的意思是”宽度自动适配设备屏幕宽度"
    • inital-scale=1.0的意思是“初始宽度为屏幕宽度的1倍”,实际上就是设备宽度。
    w3schools.com里也描述的很清楚,如下:

    The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.

    You should include the following <meta> element in all your web pages:

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

    This gives the browser instructions on how to control the page's dimensions and scaling.

    The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

    The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

     
  • 相关阅读:
    Linux系统下ZIP文件解压和压缩命令
    解析XML文件
    数组和集合之间的转换
    数据库密码到期修改密码
    Linux系统中启动jar程序
    JSONArray依赖包
    多态性
    接口----interface
    抽象类
    final关键字
  • 原文地址:https://www.cnblogs.com/dapplehou/p/14132803.html
Copyright © 2011-2022 走看看