移动端苏宁首页制作和rem

最新推荐文章于 2022-12-06 19:06:56 发布

王祎0825

最新推荐文章于 2022-12-06 19:06:56 发布

阅读量1.2k

点赞数 1

分类专栏：阶段二：移动web网页开发文章标签： css3 html5 less

本文链接：https://blog.csdn.net/qq_44757223/article/details/123979454

版权

文章目录

前言
一、技术方案1（less + rem + 媒体查询）
二、搭建相关文件夹结构
三、设置视口标签以及引入初始化样式
四、设置公共common.less
五、新建index.less文件
六、body样式
七、代码展示
八、技术方案2（flexible.js+rem）⭐

前言

案例：苏宁移动端首页
访问地址：https://m.suning.com/

一、技术方案1（less + rem + 媒体查询）

方案：采取单独制作移动页面方案
技术：布局采取rem适配布局（less + rem + 媒体查询）
设计图：采用750px设计尺寸

二、搭建相关文件夹结构

在这里插入图片描述

三、设置视口标签以及引入初始化样式

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">

四、设置公共common.less

新建common.less 设置好常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
划分的份数定为15等份
因为pc端也可以打开苏宁移动端首页，默认html字体大小为50px，注意这句话写到最上面

五、新建index.less文件

新建index.less 这里面写首页的样式
将刚才设置好的common.less引入到index.less里面语法如下：

// 在index.less中导入common.less文件
@import "common"
// @import导入的意思 可以把一个样式文件导入另外一个样式文件里面
// link是把一个样式文件引入到html页面里面

生成index.css引入到index.html里面

六、body样式

body{
   
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #F2F2F2;
}

七、代码展示

body部分

<body>
    <!-- 顶部搜索框 -->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" value="赵健渊在线售卖">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>
    <!-- banner部分 -->
    <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>
    <!-- 广告部分 -->
    <div class="ad">
        <a href="#"><img src="upload/ad1.gif" alt=""></a>