适配

最新推荐文章于 2021-02-18 14:17:15 发布

KrisChung

最新推荐文章于 2021-02-18 14:17:15 发布

阅读量175

点赞数

分类专栏：个人总结

本文链接：https://blog.csdn.net/qq_39469688/article/details/84562560

版权

个人总结专栏收录该内容

43 篇文章 1 订阅

订阅专栏

文章目录

适配
- - 方案
  - rem

适配

方案


	让移动端的网页在各种移动端设置上 ，能够完好显示
	适配方案:
		> 1.百分比- 固定高度，宽度不固定（动态）
			大部分的元素 大小分布比较均匀  单位%  flex
		
		> 2.固定宽度 - 在啥情况 使用都可以，但是相对而言比较少，用KM打包工具打包成APP，布局错乱
			单位是具体的 px % flex

		> 3.rem  目前用得比较普遍，在不同的移动端上 元素的大小也各不相同，因为是根据屏幕的宽度进行适配的
			单位 是 rem flex %
			rem:
                    r  root  -> Html

                    em
                        根据自身的文字去计算 元素默认的文字是16px 那1em= 16px
                    rem : 根据 html的文字大小 去进行计算元素的大小


	 media  在特定的设备或宽度里，要控制某些元素或文字大小，会结合media
	 vw vh 1vw是占屏幕宽度的1% 1vh占高度的1% 有兼容问题，比较少，自适应项目会用到
            dpr  有js api获取到设备的像素比

	响应式
                可以在移动端进行显示，最好不要，如果做app，移动端和PC端分开
                响应式布局的网页非常不适合嵌套在app

rem

下载koala软件可以动态实时的将css预处理文件less 更新到css文件中，less文件可以定义变量，koala将
变量计算好实时的更新到css文件中

index.html


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--如果不写视口大小，那么视口是980px，那么html body的大小也是980，所以要我规定视口大小为设备的屏幕-->
    <script>
//        根据设备的宽度,动态设置 html的文字大小
        var html = document.querySelector('html');
        var width = html.getBoundingClientRect().width;
        html.style.fontSize = width/10 + 'px'; // 把屏幕的大小分成 10等分
    </script>

    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div>
        <ul class="clearFix">
            <li><a href=""><img src="img1/1.png" alt="" width="100%" height="100%"></a><span>京东超市</span></li>
            <li><a href=""><img src="img1/2.png" alt="" width="100%" height="100%"></a><span>全球购</span></li>
            <li><a href=""><img src="img1/3.png" alt="" width="100%" height="100%"></a><span>全球服饰</span></li>
            <li><a href=""><img src="img1/4.png" alt="" width="100%" height="100%"></a><span>京东生鲜</span></li>
            <li><a href=""><img src="img1/5.png" alt="" width="100%" height="100%"></a><span>京东到家</span></li>
        </ul>
        <ul class="clearFix">
            <li><a href=""><img src="img1/6.png" alt="" width="100%" height="100%"></a><span>充值缴费</span></li>
            <li><a href=""><img src="img1/7.png" alt="" width="100%" height="100%"></a><span>京东豆</span></li>
            <li><a href=""><img src="img1/8.png" alt="" width="100%" height="100%"></a><span>领卷</span></li>
            <li><a href=""><img src="img1/9.png" alt="" width="100%" height="100%"></a><span>赚钱</span></li>
            <li><a href=""><img src="img1/10.png" alt="" width="100%" height="100%"></a><span>物流查询</span></li>
        </ul>
    </div>

    <script>
/*
        在移动端：
            1倍屏幕  1倍设计图
            2倍屏幕  2倍设计图
            3倍屏幕  3倍设计图

        1倍屏幕  1倍设计图
            300px  img 300px
        2倍屏幕  2倍设计图
            300px  img 300px  dpr=2 像素比  高清屏幕
            实际大小是
                300*2 大小
                    图片放大会模糊
         3倍屏幕  3倍设计图
            300px  img 300px  dpr=3
                  300*3 大小
                        图片放大会模糊
            dpr 像素比 = 物理像素 / 独立像素
                物理像素: 设备分辨率
                独立像素: 用户用设备看网页,网页是谁开发的? 开发者怎么设置大小( css PX ),然后转换成 设备分辨率?
               dpr =2  css 的1px 它会把其显示成2px

*/

    </script>
</body>
</html>

index.less

/*定义变量@rem = 64rem */
@rem:640/10rem;

*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
div{}
div ul{
  display: flex;
  height: 110/@rem;
}
div ul li{
  flex: 1;
  font-size: 21/@rem;
  text-align: center;
  line-height: 40/@rem;
}
div ul li a{
  display: block;
  width: 68/@rem;
  height: 69/@rem;
  margin: 0 auto;
}
div ul li span{

}

index.css

/*定义变量@rem = 64rem */
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
div ul {
  display: flex;
  height: 1.71875rem;
  width:70%;
  margin:0px auto;
  border:1px solid red;
}
div ul li {
  flex: 1;
  font-size: 0.328125rem;
  text-align: center;
  line-height: 0.625rem;
}
div ul li a {
  display: block;
  width: 1.0625rem;
  height: 1.078125rem;
  margin: 0 auto;
}

KrisChung

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
适配

文章目录适配方案rem适配方案让移动端的网页在各种移动端设置上，能够完好显示适配方案: &gt; 1.百分比- 固定高度，宽度不固定（动态）大部分的元素大小分布比较均匀单位% flex &gt; 2.固定宽度 - 在啥情况使用都可以，但是相对而言比较少，用KM打包工具打包成APP，布局错乱单位是具体的 px % flex &gt; 3....
复制链接

扫一扫