H5移动端rem布局还原750px设计稿方案。

news/2025/2/9 23:49:04/

引入对应的脚本:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!--引入淘宝lib-flexible布局--><script src="./index.min.js"></script><!--引入淘宝lib-flexible布局--><!--设计稿给出750px的设计图,然后对应除去75就为样式的rem, 比如设计稿的元素宽度是75px, 那么样式直接写1rem就可以了--><link href="./h5.css" rel="stylesheet" /><title>H5淘宝移动端布局方案</title>
</head>
<body><ul><header>header</header><div class="box"><div class="left">left</div><div class="right">right</div></div></ul>
</body>
</script></script>
</html>

css代码: 

* {margin: 0;padding: 0;
}
/********设计稿给出750px的设计图,然后对应除去75就为样式的rem, 比如设计稿的元素宽度是75px, 那么样式直接写1rem就可以了***********/
header {width: 10rem;height: 1.5rem;background: red;font-size: 0.36rem;
}.box {margin: 0 auto;width: 6.9466rem;height: 6.173rem;background-color: #515b66;background: blue;font-size: 36px;
}.box .left {float: left;width: 3.2rem;height: 1rem;background: green;
}.box .right {float: left;width: 4.3rem;height: 1rem;background: yellow;
}

设计稿给出750px的设计图,然后对应除去75就为样式的rem, 比如设计稿的元素宽度是75px, 那么样式直接写1rem就可以了


http://www.ppmy.cn/news/120251.html

相关文章

Daily Practice 8th:Codeforces Round #750 (Div. 2)

VP*8&#xff1b; rating&#xff1a;800--900--1200--1600--2000 A. Luntik and Concerts 给出一分钟的歌曲a首&#xff0c;两分钟的歌曲b首&#xff0c;三分钟的歌曲c首&#xff0c;怎样把这些歌分配到两场音乐会&#xff0c;使得两场音乐会的时间差最小&#xff0c;求这个…

STM32H743/750+Cube+DP83848(二)

少扯皮&#xff0c;多做事 想看配置的参考&#xff1a;STM32H743/750CubeDP83848&#xff08;一&#xff09; 下载文件&#xff0c;ST官网搜LWIP&#xff0c;好像都一样&#xff0c;没仔细观察&#xff0c;下载的F407的Lwip也可以用 ST下载LWIP 下面把你准备的tcp_echoserver.…

codeforces 750 (Div2)ABCD

contents: A. Luntik and Concerts题意思路AC B. Luntik and Subsequences思路AC C. Grandma Capa Knits a Scarf思路AC D. Vupsen, Pupsen and 0思路AC A. Luntik and Concerts Luntik has decided to try singing. He has a one-minute songs, b two-minute songs and c thr…

禾川伺服驱动器X2E-750调试记录

使用第一步 &#xff0c;设置使能 11 脚 接 24V 9 脚 接 电源 地 但是我这样接发现没有使能&#xff0c;原因待查明 于是我通过设置P04.11 设置为 1 内部使能&#xff0c;设置了电机使能。 1、 新买的禾川伺服驱动器&#xff0c;会提供一份说明&#xff0c;而我是的脉冲方…

INCONEL 合金 X-750耐腐蚀性能

概述 INCONEL 合金 X-750 (UNS N07750 / W.Nr. 2.4669) 是一种可沉淀硬化的镍铬合金&#xff0c;在高达 1300F 的温度下具有抗腐蚀性和抗氧化性以及高强度。尽管随着温度升高超过 1300F&#xff0c;沉淀硬化的大部分效果会消失&#xff0c;但热处理材料在高达 1800F 时仍具有有…

【10.26】【VP】Codeforces Round #750 (Div. 2)

ALL&#xff1a;8 AC&#xff1a;3 补题&#xff1a;3 Rank&#xff1a;3371 C. Grandma Capa Knits a Scarf 题意&#xff1a;略。 思路&#xff1a;双指针扫一遍即可。赛时写麻烦了。 AC代码&#xff1a;https://codeforces.com/contest/1582/submission/177942998 D. Vup…

LeetCode 750. 角矩形的数量(DP)

文章目录 1. 题目2. 解题 1. 题目 给定一个只包含 0 和 1 的网格&#xff0c;找出其中角矩形的数量。 一个「角矩形」是由四个不同的在网格上的 1 形成的轴对称的矩形。 注意只有4角的位置才需要为 1。并且&#xff0c;4 个 1 需要是不同的。 示例 1&#xff1a; 输入&#…