设计稿是750px时的,rem设置

最新推荐文章于 2024-07-07 00:07:17 发布
最新推荐文章于 2024-07-07 00:07:17 发布
阅读量1.2w 收藏 11
点赞数
分类专栏： 移动端rem html5 文章标签： rem换算
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunny_810/article/details/98949817
版权

 

<script>
        + function() {
            remLayout();

            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
  </script>



body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.layout {
  width: 100%;
  max-width: 750px !important;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto;
  text-align: center;
}
.a1 img {
  height: 4.55rem;
}

图中的img高是455px

以750px的设计稿为准。图片高455px. 换算成rem即4.55rem.

加了这段之后，设计 稿上
比如是100px。即1rem;
450px.即4.5rem;
@REM:100;
width:100px / @REM;
 

简单的登录注册页

完整代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="applicable-device" content="mobile" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title></title>
    <style>
      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            background:rgba(0,0,0,0.8);
            max-width:750px;
            overflow-x:hidden;
            font-size:0.16rem;
            font-family: "Microsoft YaHei", "微软雅黑", SimSun, "宋体", "Hiragino Sans GB", Helvetica, Arial, "Lucida Grande", sans-serif !important;
        }
        .leftright {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            text-align: justify;
            position: relative;
        }

        a {
            text-decoration: none;
        }
        .form{
            width:80%;
            margin:2rem auto;
        }
        .form-item{
            padding:0.1rem 0;
            margin-bottom:0.2rem;
            position:relative;
            background:rgba(255,255,255,.2);
           color: #eee;
           border-bottom:rgba(255,255,255,.2);
        }
        .label{
            width:22%;
            text-align:center;
            display:inline-block;
        }
        .input{
            border:none;
            outline:none;
            display:inline-block;
            width:75%;
            height:0.6rem;
            line-height:0.6rem;
            padding:0 0.08rem;
             background:none;
             color: #eee;
        }
        .code .input{
            width:48%;
        }
        .code-btn{
            position: absolute;
            text-decoration: underline;
            color: #eee;
            right: 0.3rem;
            top: 0.2rem;
            letter-spacing: 0.01rem;
        }
        .form-extra,.login-btn,.mark-text{
            color: #eee;
        }
        .form-btn{
            margin:0.6rem auto 0.2rem;
             color: #fff;
            background:mediumaquamarine;
             height:.8rem;
            line-height:.8rem;
             text-align:center;
              letter-spacing: 0.02rem;
             border-radius:0.08rem;
        }
        .form-checkbox ,.mark-text{
             display:inline-block;
            vertical-align: middle;
        }
        .form-bot .mark-text{
         color:mediumaquamarine;
        }
    </style>

    <script>
        + function() {
            remLayout();

            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
    </script>
</head>


<body>
    <form class="form">
        <div class="form-item">
            <label for="" class="label">手机号：</label>
            <input   class="input" type="text" >
        </div>
         <div class="form-item code">
            <label for="" class="label">验证码：</label>
            <input  class="input"  type="text" >
            <a   class="code-btn"  href="javascript:;">获取验证码</a>
        </div>
         <div class="form-item">
            <label for="" class="label">设置密码：</label>
            <input class="input"  type="text">
        </div>
        <div class="form-extra leftright">
            <label for="" class="extra-item">
                <input  class="form-checkbox"  type="checkbox">
                <span class="mark-text">记住密码</span>
            </label>
            <div class="extra-item">
                <a href="/login" class="login-btn">已有帐号登录</a>
            </div>
        </div>
        <div class="form-btn">
        注册
        </div>
        <label for="" class="form-bot">
          <input class="form-checkbox" type="checkbox">
          <span class="mark-text">阅读并同意sport相关协议条款</span>
        </label>
    </form>
</body>
</html>

 

登录注册

 

 

 

 

 

木偶小小
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
TheDevil__的博客
05-22 1980
一、首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后，在package.json文件中添加这段代码 “postcss”: { “plugins”: { “autoprefixer”: {}, “postcss-pxtorem”: { “rootValue”: 37.5, // 根元素大小1rem = 16px “propList”: [ "*" ] } } }, 然后在项目utils文件夹，创建rem
vue移动端自适应，设计稿750，适配 px2rem
helal的博客
03-18 2243
我的设计稿是750的，量出的宽高多少就是多少，单位为px，浏览器自动转换成rem。 1、安装：npm i postcss-px2rem --save -dev 2、安装：npm i postcss-plugin-px2rem --save 安装以上两个插件了，package.json,就会多出这两个 3、接下来就是配置了，先配置vue.config.js文件，rootValue:75，是设计稿为750，加上以下代码 plugins: [ require('postcss-plug.
教你如何根据设计图计算rem
weixin_50085089的博客
12-07 1863
pc端和移动端网站的区别 PC端：屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式。 移动端：屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备种类繁多,浏览器窗口随着移动端的屏幕大小而自适应大小, rem的概念 rem：相对于根元素(即 html 元素)font-size 计算值的倍数。 rem布局的本质是等比缩放，一般是基于宽度针对设计稿的宽度 利用js动态获取屏幕的宽度 rem是相对于根元素的字体大小的单位，也就是html的font-size大小，浏览器默认的
为什么移动端设计稿都是 750
最新发布
weixin_64684095的博客
07-07 437
因为最初是用 iphone6/iphone6 plus 确立的这个标准，而他的分辨率是 375 _ 667，实际上它拥有两倍物理像素密度 750 _ 1334。所以设计师一般会用 750 这个宽度来设计界面。保证设计的精细度。为后续切图提供了遍历。
设计稿750px移动端自适应，100px=1rem
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-09 6912
var kk=document.documentElement.clientWidth; if(kk&gt;750){ kk=750 } document.documentElement.style.fontSize=kk/7.5+"px"
设计稿750px 配置rem
酱子
08-01 3475
设计稿750px 配置rem 获取设备宽度 750 等于750 <320 等于320 设置字体大小 设备宽度/7.5 1rem=100像素 // 设计稿是750px // 设置1半的宽度，就是375px // 1rem == 100px的设计稿宽度 // 整个屏幕750px宽度7.5rem，屏幕一半的宽度375px就是3.75rem，100px等于1rem 调用 window.onresize = function(){ 调用 } function remSize() {
关于rem 针对设计稿宽度，设计rem调试比例
前端小知识
01-14 3180
css3规定：1rem的大小就是根元素html的font-size的值。 通过设置 根元素<html>的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等， 根据移动设备的宽度大小来实现自适应，不同的设备都展示一致的页面效果。 rem宽度比例 设计稿宽度 首先: 1rem = 100px 100vw = 750px 所以 1rem = 100vw / 7.5 = 13.333333333vw // 最后设置根元素font-size为13.33
postcss-pxtorem:px转rem，基于postcss
05-09
例如设计师给出640px的设计稿，写css样式的时候，就按照640px切图，单位px。 完工后，js或者css媒体查询，设定1rem的值。例如1rem == 40px。那么我们只 需要把css文件里面的px换算成rem就行。 而不需要在切图的过程...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
常见的做法是将设计稿上的像素值转换为相对单位，如rem，以便于响应式布局。 1. **使用lib-flexible适配** - **安装**：通过npm安装`lib-flexible`库，命令为`npm i lib-flexible -S`。 - **引入**：在`main.js`...
postcss-pxtorem移动端适配的实现
01-19
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，... rootValue: 32,//结果为：设计稿元素尺寸/32(一般750px的设计稿的根元素大小设置32)，比如
css中rem是怎么计算的，是怎么自适应手机端，匹配设计稿的
weixin_46003019的博客
10-23 731
好多小伙伴当学习到移动端的时候，首先就会接触到的是移动端的单位，因为在移动端布局就不太适合用px（一些字体还是需要继续使用px） 首先先介绍一下都有那些单位: px、em、pt、rem、%、vh、dp 今天我们来介绍的是rem单位 首先大家需要知道一个数值，那就是750px 没错这个750就是iPhone6、7、8的屏幕宽度，因为750这个宽度的需求还是比较大的因此，UI的设计稿一般都是设置的750px的设计稿，但是这时候问题就来了，但是好多安卓手机他不是750px的宽度啊，那怎么办呢。所以就用到了自适
rem适配（设计稿宽为750）
weixin_53944118的博客
01-14 2684
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) retu
rem动态布局的原理及对设计稿的计算比例
一心向学
01-14 2138
1，rem的原理 rem：是css的一个相对单位 相对于html根元素， 可以通过监测屏幕大小改变html的字体大小从而实现自适应大小的效果，相对于根元素(即 html 元素)font-size 计算值的倍数。 先按定高宽设计出来页面，然后转换为rem单位，实现完美自适应。例： a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5 = 50px。 关于像素的理解：“花森酱” 的博客 2，什么是动态布局 就是移动端项目适配不同的屏幕的大小，因为市场上手机有很多，屏幕大小也不同。
rem布局 html,移动端h5之rem布局／px2rem
weixin_35326667的博客
06-14 541
rem布局之媒体匹配最早的时候用的rem适配方法，通过手动设置媒体查询对不同设备进行设置font-size// 自适应// ------------------------html{font-size: 38px;}@media only screen and (min-width: 320px) {html {font-size: 42.666px !important;}}@media onl...
松下弧焊机器人 调电压_松下焊接机器人操作规程
weixin_32902659的博客
12-23 1101
v1.0可编辑可修改1第1页共2页松下机器人操作规程一、资格要求：设备操作人员必须经过松下机器人的专业培训，取得机器人操作合格证后上岗。没有使用部门的领导安排，不得擅自对设备的内部设定修改。禁止有参加培训的人员，擅自非法操作设备。二、设备操作前的检查：机器人本体、控制柜、焊接电源示教盒及各附件连接电缆的外观良好。消耗品(焊丝、气体、导电嘴等)的确认，库存是否足够。部品件的夹具工作状况确认。设备急停...
PS教程新手入门（四）--PS实用的技巧教程 批量修改图片尺寸（宽750px;高不限制）
笑桐笔记的博客
08-24 5750
一，打开ps后，新建画板，宽度设置为750px；高度设置为最大值（能包含所有图片高度的值） 分辨率设置为300更合适 创建好之后，将所有图片批量拉入画板中： （并按enter键，有几张图片就按几次）   选中所有图片---ctrl+t进入可编辑状态--- 新建参考线 选中裁剪，如图所示：    将上下拉动至参考线位置：  二，将文件进行导出 文件-导出-到处图层到文件即...
移动端适配750设计稿flexible+rem+csstorem
weixin_60559438的博客
05-16 618
4.引入下载好的flexible，浏览器控制台打开，左右伸缩屏幕，看html上面的font-size变不变，1.去官网上看github地址: https://qithub.com/amfe/lib flexible。3.设置图标里面找设置，然后右上角第一个是setting.json,在设置 "cssrem.rootFontSize": 75,5.配置媒体查询，在style里面配置。2.vscode下载，pxtorem。
rem是怎么计算的
qq_38473364的博客
02-25 2363
rem怎么计算
vw、px、rem换算
元飞
01-06 9371
vw、px、rem换算 1vw=1%窗口宽度（也就是窗口宽度是100vw） 以固定宽度750px为例进行计算： ---------------------------------------------------------------------------------------------- 方法一、vw、px、rem换算（1rem = 100px）： 已知：750px = 100vw 计算：1px = (100vw / 750px) = 0.1333vw 定义：1rem = 100px （也
设计稿是375配置rem
05-25
如果设计稿的宽度是375px，并且使用了rem作为单位，那么在任何设备上都可以实现等比缩放。具体的转换方法如下： 1. 设置html的font-size为屏幕宽度的1/375倍，即：font-size = screen.width / 375 + "px"。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值