zoukankan      html  css  js  c++  java
  • 怎么让手机网站自适应设备屏幕宽度?

    手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。

    工具/原料

     
    • 写代码软件,记事本或DW都可以
    • 手机或平板一台,做测试

    方法/步骤

     
    1.  

      方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 

      解释:

      width=device-width :宽度等于设备屏幕的宽度

      initial-scale=1.0:表示:初始的缩放比例

      minimum-scale=0.5:表示:最小的缩放比例

      maximum-scale=2.0:表示:最大的缩放比例

      user-scalable=yes:表示:用户是否可以调整缩放比例

    2. 2

      另外:如果想控制字体的大小的话,应该使用相对大小,可以用下面这段代码,一般不用也可,这里只是说名一种方法。

      相对大小的字体

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

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

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

        h1 {font-size: 1.5em; }

      然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

        small {font-size: 0.875em;}

      small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

      有两种
      1.通过设置viewport参数
      2.使用css3中的缩放
      两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例,然后进行缩放。但是因为目前手机种类繁多,浏览器种类也很多,所以每种方法各自都有不少的问题。

      <</span>meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
      在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。

      其中:
      width=device-width :表示宽度是设备屏幕的宽度
      initial-scale=1.0:表示初始的缩放比例
      minimum-scale=0.5:表示最小的缩放比例
      maximum-scale=2.0:表示最大的缩放比例
      user-scalable=yes:表示用户是否可以调整缩放比例 

  • 相关阅读:
    自考过后的总结——如何快乐学习?
    自考总结——数据库原理第三章
    机房收费系统——用户权限和功能分析
    SQL视频总结
    学生信息管理系统总结——数据库的访问方式
    学习信息管理系统总结——数据库的连接和访问(一)
    学生信息管理系统总结——student数据库中表关系分析
    Kafka-文件管理
    Kafka-分区分配规则
    Kafka-处理请求(生产请求、获取请求)
  • 原文地址:https://www.cnblogs.com/Jacklovely/p/5726360.html
Copyright © 2011-2022 走看看