移动端适配-rem练习

最新推荐文章于 2025-02-11 13:22:58 发布
最新推荐文章于 2025-02-11 13:22:58 发布
阅读量242 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37635519/article/details/91358792

点击查看运行
html部分

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0 ,initial-scale=1.0" id="view"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>rem适配练习</title>
        <link rel="stylesheet" href="./index.css">
        <script> 
                (function(doc,win,designWidth){
                    var html=doc.documentElement;
                    function refreshRem(){
                        var clientWidth=html.clientWidth;
                        if(clientWidth>=designWidth){
                            html.style.fontSize="100px";//给宽度一个最大值，如果设备的宽度已经超过设计稿的尺寸了，统一按一个值去算。

                        }else{
                            // html.style.fontSize=16*clientWidth/375+'px';//以iphone6字体大小为16px为基准
                            html.style.fontSize=100*(clientWidth/designWidth)+'px';//
                        }
                    };
                    doc.addEventListener('DOMContentLoaded',refreshRem);//dom加载完执行事件
                })(document,window,750);

        </script>
        
        
    </head>
    <body>
        <header id="header">
            <a href="#">北京市</a>
            <div>
                <input type="text" placeholder="输入店铺,商品等">
            </div>
            <a href="#">我的</a>
        </header>
        <section class="banner">
            <a href="#"><img src="images/banner.jpg" alt=""></a>
        </section>
        <nav class="nav">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/circle_01.png" alt="">
                        <span>餐饮住宿</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/circle_02.png" alt="">
                        <span>汽车美容</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/circle_03.png" alt="">
                        <span>生活服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/circle_04.png" alt="">
                        <span>休闲娱乐</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/circle_05.png" alt="">
                        <span>教育培训</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/circle_06.png" alt="">
                        <span>家居建材</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/circle_07.png" alt="">
                        <span>酒水饮料</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/circle_08.png" alt="">
                        <span>婚纱婚庆</span>
                    </a>
                </li>
            </ul>
        </nav>

        <section id="ad1" class="clearfix">
            <a href="#"><img src="images/img_01.jpg" alt=""></a>
            <a href="#"><img src="images/img_02.jpg" alt=""></a>
            <a href="#"><img src="images/img_03.jpg" alt=""></a>
        </section>
        <section id="ad2">
                <a href="#"><img src="images/img_04.jpg" alt=""></a>
        </section>

        <section id="list">
            <h3><span>综合推荐</span></h3>
            <article>
                <a href="#">
                    <div class="img">
                        <img src="images/img_05.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>悠悠奶茶</h4>
                        <p>销售各类散茶、品牌茶叶、茶具。全品一展示茶叶茶具批牌茶叶、茶具。全品一展示茶叶茶具发商</p>
                        <div>
                            剩余领取<strong>0</strong>份 
                            <span class="discount">8.0折</span>
                            <span class="red">幸运红包</span>
                        </div>
                    </div>
                </a>
            </article>
            <article>
                    <a href="#">
                        <div class="img">
                            <img src="images/img_05.jpg" alt="">
                        </div>
                        <div class="text">
                            <h4>悠悠奶茶</h4>
                            <p>销售各类散茶、品牌茶叶、茶具。全品一展示茶叶茶具批牌茶叶、茶具。全品一展示茶叶茶具发商</p>
                            <div>
                                剩余领取<strong>0</strong>份 
                                <span class="discount">8.0折</span>
                                <span class="red">幸运红包</span>
                            </div>
                        </div>
                    </a>
            </article>
            <article>
                    <a href="#">
                        <div class="img">
                            <img src="images/img_05.jpg" alt="">
                        </div>
                        <div class="text">
                            <h4>悠悠奶茶</h4>
                            <p>销售各类散茶、品牌茶叶、茶具。全品一展示茶叶茶具批牌茶叶、茶具。全品一展示茶叶茶具发商</p>
                            <div>
                                剩余领取<strong>0</strong>份 
                                <span class="discount">8.0折</span>
                                <span class="red">幸运红包</span>
                            </div>
                        </div>
                    </a>
            </article>
            <article>
                    <a href="#">
                        <div class="img">
                            <img src="images/img_05.jpg" alt="">
                        </div>
                        <div class="text">
                            <h4>悠悠奶茶</h4>
                            <p>销售各类散茶、品牌茶叶、茶具。全品一展示茶叶茶具批牌茶叶、茶具。全品一展示茶叶茶具发商</p>
                            <div>
                                剩余领取<strong>0</strong>份 
                                <span class="discount">8.0折</span>
                                <span class="red">幸运红包</span>
                            </div>
                        </div>
                    </a>
            </article>
        </section>
    </body>
    </html>

css部分：

 
/* 样式重置 */
body {
	font-family: helvetica;
	margin: 0 auto;

	/* max-width: 750px; */
}
@media screen and (min-width: 750px){
	body{
		width: 750px;
	}
}

body * {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: 100%;
}
a,button,input {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button,input {
	-webkit-appearance: none;
	border-radius: 0;
}
a {
	text-decoration: none;
}
input {
	outline: none;
	vertical-align: middle;
	padding: 0;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
img{
	vertical-align: middle;
}
h3,h4,p{
	margin: 0;
}
.left {
	float: left;
}
.right {
	float: right;
}
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

*{
    margin:0;
    padding:0;
    list-style: none;
    text-decoration: none;
}
/* heaader */
#header{
    display: flex;
    align-items: center;
    height:50px;
    line-height: 50px;
    background-color:#d22147;
    font-size:14px;
    color:#fff;
}
#header a{
    color:#fff;
   
    
}

#header a:nth-of-type(1){
    text-align: center;
    flex:0 0 80px;
}

#header a:nth-of-type(1):after{
   content: "";
   display: inline-block;
   width: 12.5px;
   height:7px;
   background: url(images/ico_01.png) no-repeat center/cover ;
   /* background-size: cover; */
   margin-left: 4px;
}
#header div{
    flex:1;
}
#header div input{
    text-indent: 34px;
    /* padding-left:34px; */
    width:100%;
    height:32px;
    border-radius: 8px;
    border:none;
    color:#e2c2c9;
    background: #ae3e56 url(images/ico_02.png) no-repeat 8px 5px/21px 22px;
}

#header a:nth-of-type(2){
    text-align: center;
    flex:0 0 69px;
}
#header a:nth-of-type(2):before{
    content: "";
    display: inline-block;
    width: 13px;
    height:13px;
    background: url(images/ico_03.png) no-repeat center/cover ;
    /* background-size: cover; */
    margin-right: 5px;
}

/* banner */
.banner{
    text-align: center;
}
.banner a img{
    width:7.5rem;
    /* width:100%; */

} 
.nav {
    font-size: 0px;
}

.nav ul{
    background-color:#f2f0f0;
}
.nav li{
    width:25%;
    display:inline-block;
    text-align: center;
    margin:0.2rem 0;
}

nav li a{
    font-size:0.28rem;
    color:#525252;
}
nav li img{
    display:block;
    margin:0 auto 0.1rem auto;
    width:0.75rem;
    height:0.75rem;
}
/* ad1 */
#ad1 a{
   
    float:left;
    /* display: inline-block; */

}
#ad1 a img{
    width:2.5rem;
    height:2.5rem;
}
/* ad2 */
#ad2{
    background-color: #f2f0f0;
    padding: 0.3rem 0;
}
#ad2 img{
    width:100%;
}

#list h3{
    font-size: 16px;
    color:#131313;
    height:40px;
    line-height: 40px;
    padding-left:10px;
    font-weight:normal;
    /* border-bottom:1px solid #d2d2d4; */
    position: relative;

}

/* 解决1px的问题 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #list h3:after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #c1c0c5;
        color: #c1c0c5;
        transform-origin: 0 0;
        transform: scaleY(0.5);
    }
}
#list h3::before{
    content:"";
    display:inline-block;
    width:0.08rem;
    height:0.32rem;
    background-color:#cc0530;
    border-radius:0.05rem;
    margin-right:0.2rem;
    vertical-align: middle;

}
#list h3 span{
    vertical-align: middle;
    
}
#list article{
    position: relative;
    /* border-bottom:1px solid #c1c0c5; */
    
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #list article:after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #c1c0c5;
        color: #c1c0c5;
        transform-origin: 0 0;
        transform: scaleY(0.5);
    }
}
#list article a{
    padding:0.2rem;
    display:flex;

}
#list article .img{
    flex :0 0 auto;
    padding-right:0.3rem;
}
#list article .img img{
    width:2.14rem;
    height:1.94rem;

} 
#list article .text{
    flex:2 2 auto;
}
#list article .text h4{
    font-size: 0.28rem;
    color:#181818;
    line-height: 0.6rem;
    margin-bottom:0.05rem;
}
#list article .text p{
    font-size: 0.24rem;
    color:#979797;
    line-height: 0.36rem;
    margin-bottom:0.19rem;
     /*...表示  */
    display:-webkit-box;
    -webkit-line-clamp:2;/*设置文本显示行数*/
    -webkit-box-orient:vertical;
    overflow: hidden;
}
#list article .text div{
    height:0.34rem;
    font-size: 0.24rem;
    line-height: 0.34rem;
    color:#525252;

}
#list article .text div strong{
    color:#cc0530;
    margin:0 0.09rem;

}
.text .discount{
    display:inline-block;
    width:0.84rem;
    height:0.33rem;
    color:#fff;
    background:url(images/ico_04.gif) no-repeat ;
    background-size: cover;
    padding-left:0.15rem;
    margin-left: 0.15rem;
    box-sizing: border-box;


}
.text  .red{
    float:right;
    background:url(images/ico_05.png) no-repeat left center ;
    background-size:0.24rem 0.22rem;
    padding-left:0.28rem; 
}
移动端rem布局初步练习
wujimiao的专栏
03-17 1268
渐渐明白，要做就要做高级，现在社会已经不需要实习工，不需要初级员工。如果你培训几个月能够找到相关工作，如果刚毕业什么都不懂能够找到工作，请好好珍惜。因为很多小白给人免费实习别人都嫌碍事，本人亲历。 你不努力，就别想着高工资了，现在没有那个行业竞争不激烈，要做就要做好，否则就不要怪社会不公！ 公司需要适配移动端，只好网上找找教程，请教朋友，才渐渐有些心得体会，小白级别，做个记号。 首先是移动头
移动适配方案（rem）
Aisukola的博客
07-23 1787
移动端的适配方案1.flex+rem单位做适配效果（比如淘宝和小米移动端）当前市场最多2.flex+viewportwidth/vh单位做适配效果（比如B站移动端）新兴，马上的一个趋势让flex做布局（盒子摆放），让rem或者vw/vh实现网页元素的尺寸（宽度和高度）适配屏幕。...
移动端rem学习
somelittlelove的博客
10-17 182
rem： 用来替换px的单位，在页面根元素设置大小后，每个rem就是页面根元素的大小，例： html {font-size: 12px;} h1 { font-size: 2rem; } /* 2 × 12px = 24px */ p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */ div {width: 20rem;} /* 20 * 12px =...
移动端rem
zhangjing1019的博客
03-18 296
       写移动端页面最麻烦的是什么，不同分辨率的适配！        一、什么是rem        具体来说，有的屏幕320px宽，有的屏幕640px宽，有的更宽，如果你写固定px，那么要么小的放不下，要么大的有大片空白。                比如320px的10%是32px，640px的10%是64px，        如果10个10%宽度的元素放在一起，那肯定就是100%，即...
移动端rem适配问题
weixin_44828588的博客
04-01 151
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
（4）：rem与em
weixin_46511008的博客
09-26 180
原文：综合指南: 何时使用 Em 与 Rem 一、rem与em 1、em 和 rem 都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器翻译成 从 16px 到 160px 或其他任意值。 2、rem 是基于 html元素 的字体大小来决定，而 em 则根据 使用它的元素 的大小决定（很多人错误以为是根据父类元素，实际上是使用它的元素继承了父类的属性才会产生的错觉） 1、rem 和 em 单位是由浏览器基于你的设计中的
23.[前端开发]Day23-移动端适配方案-考拉海购移动端项目
m0_55135449的博客
02-11 778
百分比不推荐不同位置的百分比相对参照物不一样rem + 动态的html的font-sizevwflex学习地址。
使用Vue-CLI配置lib-flexible+rem实现移动端适配教程
2. 移动端适配策略：在移动端开发中，为了实现屏幕适配，常常使用lib-flexible库配合rem单位。lib-flexible是解决移动设备屏幕适配的一种方案，它通过动态设置html元素的font-size来调整rem单位的大小，从而实现不同...
移动端适配方案
jjj_12138的博客
03-16 614
移动端适配方案 前言 我认识的很多前端的初学者停留在PC端页面的阶段，但其实移动端开发也是非常重要的一个模块。而在移动端开发中最需要我们注意的，就是适配问题。这篇文章对完全没有接触过移动端开发的小伙伴也比较友好，我们从源头开始，让没有接触过移动端的小伙伴先有一个宏观上的认知，然后我们再细致的聊聊移动端适配的那些事儿（文章比较长，大家可以分阶段食用）。 何为移动端开发 大家最开始学习前端，一定是从PC端页面做起的，同样的道理，移动端无非就是把PC端的网页搬到手机上而已，通常我们把这样的项目叫做app（手动尴尬
前端开发基于面试题的前端核心技术解析：涵盖盒模型、取消请求、Cookie共享及移动端适配等关键知识点
最新发布
05-09
中级部分探讨了Axios取消请求的方法、Cookie跨域共享、px转rem的方式、富文本划词操作、PDF预览的实现、减少if-else语句的方法、React Hooks的调用规则、Ajax与XMLHttpRequest的关系及Axios的底层依赖。高级部分讨论...
前端案例-3 rem布局移动页面
KathyLJQ的博客
03-27 338
效果图： less+媒体查询+rem 步骤： (1)下载node（本版本为node-v14.16.0-x64）下载完直接双击下一步直到安装完成（在cmd中输入node -v确认是否安装成功，若安装成功会提示当前版本号，否则安装不成功） https://pan.baidu.com/s/1rSeVOqsoLuLCqjsYhlNDEQ 提取码：8iyz (2)在cmd中安装less,命令行中输入npm install -g less,安装完成后输入lessc -v 确认安装是否成功，如果出现当前less版本号
rem的实现原理
weixin_37739550的博客
08-20 3487
em和rem在逻辑上的差别仅仅是参照对象不同，em是参照父元素的字体大小，rem是参照根目录HTML的字体大小。 rem布局实际上就是实现等比缩放 试想，如果我们的元素在不同的屏幕上可以按照相同的比例来进行缩放就好了。 rem的计算原理： 试想把屏幕平均分成10份，那么每一份就是1/10，我们选择每一份的大小是1rem，那么一个5*(1/10)的大小就占屏幕大小的50%，这就是rem 我们设计稿的宽度是750px，那么对于设计稿上宽度为600px的一个元素，它的rem值是怎么计算呢？ 上面我们把屏幕分成了
Html5移动开发(2)rem使用和基本布局
weixin_34275734的博客
02-06 172
不同分辨率下效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0...
移动端开发之rem布局
qq_35788269的博客
05-31 774
移动端开发之rem布局今天，博主带来的分享是移动端开发之rem布局！先来贴下效果把！移动端设备为iphone6代码如下：主要有四部分，HTML部分，CSS部分，浏览器以及设备兼容部分，常用设置部分！第一部分：HTML部分：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
padding 后尺寸变化 设置_使用rem设置padding大小的问题
weixin_39751453的博客
12-21 2106
HTML代码：rem再体验主要样式为：html{font-size: 6.25%;}//也就是1rem等同于1px.container-fluid{font-size:16rem; padding:15rem; margin:15rem;}看到这样的代码，我认为container-fluid的字体大小为16px，padding值为15px，可实际上呢？Chrome(版本号：53.0.2756.0 ...
HTML+CSS测试题
wen110898的博客
08-20 2655
前言 近日对HTML与CSS的学习已经告一段落了，htm和css说难不难说易不易，难于记得东西很多，易于操作，而且在布局方面比较锻炼你的斯维逻辑。但是相对于后面js的学习还是算简单了，前两天我们也进行了一次阶段考试，我整理了一下考试的题目与答案详解，考后答案里面我会习惯性的将相关知识一起注解上去，方便复习学习。 下面试卷奉上： 一、选择题 第九题选择题详解： 1.定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。 默认地，表单数据会编码为 “application/x-ww
前端面试题-rem 原理
m0_46165310的博客
07-21 2520
前端面试题-rem原理
移动端px转化成rem
weixin_45020738的博客
05-08 262
html 联合医产 免费注册 ...
手机端页面自适应解决方案—rem布局
weixin_34194359的博客
10-13 344
2019独角兽企业重金招聘Python工程师标准>>> ...
移动端rem怎么用?
Bright2017的博客
12-08 6109
移动端rem怎么用?
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值