zoukankan      html  css  js  c++  java
  • web宽度适配(H5适配,pc适配)

    一. H5屏幕适配

    1. 原理:监听屏幕宽度,动态改变html的根节点font-size

    2. 换算:font-size的px  相当于  1rem

    3. 缺陷:只能做到宽度布局会一样,但是高度布局也相同但由于不同手机比例不同可能会超出屏幕范围,高度做可滚动

    4. 注意:高度布局要从上往下布局,不然可能出问题

    5. 主流做法是屏幕宽度除以10,目前项目是屏幕宽度除以20且屏幕宽度大于750不处理适配

    注意:还可以用vh和vw做屏幕适配:1vh代表视图高度1%,感觉这样很好用啊

    二. PC适配

    1. 原理:台式机1920宽,笔记本1366宽,将需要显示的页面居中约1300px,外层div通过margin的auto进行内部内容居中显示页面,1300px多余部分由于屏幕不同动态转变margin达到适配目的。

    2. 例图:随着屏幕缩小中间不动,两边进行收缩

    作者:dlm17
    本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    Java基础
    数据库表设计
    Spring循环依赖
    Mysql类型转换
    Mysql刷题
    JavaScript
    Git
    告别.NET生成报表统计图的烦恼
    JS给页面标签添加事件(或超链接链接)
    发现联想手机P630型号的一个严重的系统Bug
  • 原文地址:https://www.cnblogs.com/dlm17/p/12345316.html
Copyright © 2011-2022 走看看