采用rem高仿网易新闻h5版新闻列表页

最新推荐文章于 2024-03-05 21:39:00 发布

UIEngineer

最新推荐文章于 2024-03-05 21:39:00 发布

阅读量5.9k

点赞数

分类专栏： webApp

本文链接：https://blog.csdn.net/zjsfdx/article/details/79330002

版权

webApp 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、页面框架搭建(构建，scss)
终端输入

webpack --watch

可以执行webpack文件侦听并打包

二、页面样式编写

三、rem计算代码编写

四、适配多种机型大小，resize完善

代码如下：
文件目录
这里写图片描述

app.js

require('./index.scss');        // 引入scss文件

// 获取屏幕宽度(viewport宽度)
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

// 获取html的DOM
let htmlDom = document.getElementsByTagName('html')[0];

// 设置html的fontsize
htmlDom.style.fontSize = htmlWidth / 10 + 'px';

window.addEventListener('resize',(e)=>{
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';
});

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>新闻列表</title>
<link rel="stylesheet" type="text/css" href="./reset.css" />
</head>

<body>
    <div class="header">
        <ul class="header-content">
            <li class="header-item">推荐</li>
            <li class="header-item">新闻</li>
            <li class="header-item">娱乐</li>
            <li class="header-item">体育</li>
            <li class="header-item">图片</li>
            <li class="header-item">财经</li>
        </ul>
    </div>
    <div class="banner-content">
        <img class="banner" src="./images/top.jpg" />
        <p class="banner-title">2018狗年时尚跨界盛典</p>
    </div>
    <div class="news-content">
        <ul>
            <li class="news-item">
                <div class="item-inner">
                    <img class="news-img" src="./images/1.jpg" />
                    <p class="news-title">美女头像美女头像美女头像美女头像</p>
                    <span class="time">
                        1小时前
                    </span>
                    <span class="num">
                        99999
                    </span>
                </div>
            </li>
            <li class="news-item">
                <div class="item-inner">
                    <img class="news-img" src="./images/1.jpg" />
                    <p class="news-title">美女头像美女头像美女头像美女头像</p>
                    <span class="time">
                        1小时前
                    </span>
                    <span class="num">
                        99999
                    </span>
                </div>
            </li>
            <li class="news-item">
                <div class="item-inner">
                    <img class="news-img" src="./images/1.jpg" />
                    <p class="news-title">美女头像美女头像美女头像美女头像</p>
                    <span class="time">
                        1小时前
                    </span>
                    <span class="num">
                        99999
                    </span>
                </div>
            </li>
            <li class="news-item">
                <div class="item-inner">
                    <img class="news-img" src="./images/1.jpg" />
                    <p class="news-title">美女头像美女头像美女头像美女头像</p>
                    <span class="time">
                        1小时前
                    </span>
                    <span class="num">
                        99999
                    </span>
                </div>
            </li>
        </ul>
    </div>
    <script src="./build/bundle.js"></script>
</body>
</html>

index.scss

// 定义方法，把px转换成rem
@function px2rem($px){
    $rem:37.5px;            //  定义rem基准值，这里用的是iphone 6的视觉稿
    @return ($px / $rem) + rem;
}

html{
    background-color: #f8f8f8;
}

.header{
    height: px2rem(40px);    // 注意设计稿上是80px，需要除以2
    width: 100%;
    background-color: red;
    padding-left: px2rem(23px);
    .header-item{
        float: left;
        color: #ffcdce;
        font-size: px2rem(16px);
        margin-right: px2rem(20px);
        line-height: px2rem(40px);

        &:nth-child(2){
            color: #fff;
            font-size: px2rem(17px);
        }
    }
}

.banner-content{
    position: relative;
    .banner{
        display: block;
        width: 100%;
        height: px2rem(190px);
    }
    .banner-title{
        position: absolute;
        left: px2rem(15px);
        bottom: px2rem(15px);
        font-size: px2rem(16px);
        color: #fff;
    }
}

.news-content{
    .news-item{
        width: 100%;
        height: px2rem(90px);
        padding-left:px2rem(15px);
        padding-right:px2rem(15px);
        box-sizing: border-box;
    }
    .item-inner{
        position: relative;
        overflow: hidden;
        height: 100%;
        border-bottom: px2rem(1px) solid #e5e5e5;
    }
    .news-img{
        float: left;
        display: block;
        margin-top: px2rem(10px);
        width: px2rem(95px);
        height: px2rem(70px);
        margin-right: px2rem(15px);
    }
    .news-title{
        color: #404040;
        font-size: 17px;
        margin-top: px2rem(16px);
        line-height: px2rem(20px);
    }
    .time{
        position:absolute;
        left: px2rem(110px);
        bottom: px2rem(17px);
        color: #888;
        font-size: px2rem(12px);
    }
    .num{
        position:absolute;
        color:#888;
        font-size: px2rem(12px);
        right: px2rem(4px);
        bottom: px2rem(17px);
        &::before{
            content: ' ';
            display: block;
            position: absolute;
            width: px2rem(21px);
            height:px2rem(20px);
            background-size: contain;
            top: px2rem(-4px);
            left: px2rem(-23px);
            background-image:url('./images/read-icon.png');
        }
    }
}

package.json

{
  "name": "rem",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0"
  }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
module.exports = {
    // 页面入口文件配置
    entry:[
        './app.js'
    ],
    // 入口文件输出配置
    output:{
        path:path.resolve(__dirname,'./build'),
        filename:'bundle.js'
    },
    module:{
        // 加载器配置
        loaders:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },{
                test:/\.scss$/,
                loader:'style-loader!css-loader!sass-loader'
            },{
                test:/\.(png|jpg)$/,
                loader:'url-loader?limit=8192'
            }
        ]
    }
};