zoukankan      html  css  js  c++  java
  • 3.基础点的移动web

    1.移动端的屏幕适配

       在Web开发中可以使用px(像素)、empt(点)、in(英寸)、cm(厘米)做为长度单位,我们最常用px(像素)做为长度单位。

    我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。英寸是一个绝对的长度单位,像素是一个相对的长度单位。

    window.devicePixelRatio ~= 物理像素/独立像素

    / 获取屏幕的物理像素尺寸

    window.screen.width;

    window.screen.height;

    2.视口viewport;

        // 获取viewport的大小

    document.documentElement.clientWidth;

    document.documentElement.clientHeight;

    PCviewport不是一个HTML结构,所以我们不能通过CSS来改变它,只是拥有了浏览器窗口的大小而已。

    在移动设备上viewport不再受限于浏览器的窗口,而是允许开发人员自由设置viewport的大小,通常浏览器会设置一个默认大小的viewport,同时为了能够正常显示那些专为PC设计的网页,一般这个值的大小会大于屏幕的尺寸。

    <meta name="viewport" content="width=device-width">

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

    适配方案:

    适配方案1

    1、设置<meta name="viewport" content="width=device-width, initial-scale=1">

    2、设置内容区域大小为320px

    3、设置内容区域水平居中显示

    适配方案2

    1、设置<meta name="viewport" content="width=device-width, initial-scale=1">

    2、设置页面宽度为百分比

    适配方案3

    1、设置<meta name="viewport" content="width=device-width, initial-scale=1">

    2. 设置页面元素宽度单位为 rem em

    注:此方案比较灵活,我们的案例将采用这种方案

    关于emrem

    em 相对长度单位,其参照当前元素字号大小,如果当前元素未设置字号则会继承其祖先元素字号大小 例如 .box {font-size: 16px;}  1em = 16px .box {font-size: 32px;} 1em = 32px0.5em = 16px

    rem 相对长度单位,其参照根元素(html)字号大小 例如 html {font-size: 16px;} 1rem = 16px html {font-size: 32px;} 1rem = 32px0.5rem = 16px;  注:所有浏览器默认字号都是16px(某些安卓手机可以调置系统字号后,浏览器默认字号会受影响

    适配方案4

    1、设置网页宽度等于设备物理像素

    2、设置初始化缩放比例(值为1 / window.devicePixelRatio)

    3.关于媒体查询

    语法格式

    a) html方式

    <link href="./css/phone.css" media="only screen and (min- 320px) and (max- 640px)">

  • 相关阅读:
    python web 开发中的csrf_token问题及处理方法
    开源编辑器ueditor
    表格中的文字超出长度隐藏,显示省略号
    django前端渲染多对多关系(比如一本书的作者有哪些)
    轻量级分布式 RPC 框架
    大杀器TheFatRat
    WEB扫描器Atscan的安装和使用
    Python类(二)-类的继承
    南京邮电大学网络攻防平台WEB题
    PHP文件操作(三)-文件的写入
  • 原文地址:https://www.cnblogs.com/lijingsi9210/p/5972527.html
Copyright © 2011-2022 走看看