东北狼仙：苏宁手机端样式rem+flexible.js

最新推荐文章于 2022-05-29 19:40:22 发布
最新推荐文章于 2022-05-29 19:40:22 发布
阅读量331 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skysem1/article/details/105033941
版权

手机端研究了好几天做了手机端，还好基础的程序员生活不是很难，用心做几个项目撸出来就好了，最近学些rem布局挺不错的针对手机端使用比较不错，整个页面都可以自适应解决了字体图片等等的整体变大变小不会让页面变形，看着舒服顺眼。哈尔滨品牌策划

VSCODE 需要安装cssred

index.html 页面代码

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <link rel="stylesheet" href="css/normalize.css">

    <link rel="stylesheet" href="css/index.css">

    <SCRIPT src="js/flexible.js"></SCRIPT>

    <title>苏宁手机端</title>

</head>

 

<body>

    <div class="search-content">

        <a href="" class="classify"></a>

        <div class="search">

            <form action=""><input type="search " value="ahhahhhahahha"></form>

        </div>

        <a href="" class="login">登录</a>

    </div>

    <!-- banner -->

    <div class="banner"><img src="../htm5/upload/banner.gif" alt=""></div>

    <!-- ad -->

    <div class="ad">

        <a href=""><img src="../htm5/upload/ad1.gif" alt=""></a>

        <a href=""><img src="../htm5/upload/ad2.gif" alt=""></a>

        <a href=""><img src="../htm5/upload/ad3.gif" alt=""></a>

    </div>

    <!-- nav -->

    <div class="nav">

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

        <a href=""><img src="../htm5/upload/nav1.png" alt="">

            <span>手机浏览</span></a>

    </div></body>

</html>

 

CSS样式

body {

    min-width: 320px;

    max-width: 750px;

    width: 10rem;

    margin: 0 auto;

    line-height: 1.5;

    font-family: Arial, Helvetica, sans-serif;

    background: #f2f2f2;

}

 

a {

    text-emphasis: none;

    font-size: .333333rem;

}

 

@media screen and (min-width:750px) {

    html {

        font-size: 75px !important;

    }

}

 

.search-content {

    display: flex;

    position: fixed;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 10rem;

    height: 1.173333rem;

    background-color: #ffc001;

}

 

.classify {

    width: .586667rem;

    height: .933333rem;

    background-color: pink;

    margin: .146667rem .333333rem .133333rem;

    background: url(../images/classify.png) no-repeat;

    background-size: .586667rem .933333rem;

}

 

.search {

    flex: 1;

}

 

.search input {

    outline: none;

    border: 0;

    width: 100%;

    height: 0.88rem;

    font-size: .333333rem;

    margin-top: .133333rem;

    border-radius: .44rem;

    color: #757575;

    padding-left: .1733333rem;

}

 

.login {

    width: 1rem;

    height: .933333rem;

    margin: .133333rem;

    color: #f2f2f2;

    text-align: center;

    line-height: .933333rem;

    font-size: .333333rem;

}

 

.banner {

    width: 10rem;

    height: 4.906667rem;

}

 

.banner img {

    width: 100%;

    height: 100%;

}

 

.ad {

    display: flex;

    width: 10rem;

}

 

.ad a {

    flex: 1;

}

 

.ad img {

    width: 100%;

    height: 100%;

}

 

.nav {

    width: 10rem;

}

 

.nav a {

    float: left;

    width: 2rem;

    height: 1.866667rem;

    text-align: center;

}

 

.nav a img {

    display: block;

    width: 1.066667rem;

    height: 1.066667rem;

    margin: .133333rem auto 0;

}

 

.nav a span {

    font-size: .333333rem;

    color: #333;

}

东北狼仙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手机端网站H5静态页面 仿苏宁移动端
06-22
手机端网站H5静态页面 仿苏宁移动端, 自适应，只有静态页，可供学习
用HTML+CSS+less做一个rem布局苏宁手机端商城页面含源码分享
weixin_45802744的博客
08-29 1518
效果如下所示： less需要事先下载node，具体下载过程百度搜索安装即可 整体文件夹如下： 源码分享：https://pan.baidu.com/s/1IqhFh7V3SoTW8KShGP7kgA 提取码：d0el images和upload文件夹是图片区域 主要编写css部分（链接下载） html源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&.
实战CSS：苏宁商城静态实现
KaiSarH
12-18 1499
目标: 实现苏宁商城的静态实现 效果: 代码： 项目结构： index.html <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>current-苏宁易购(itlike.com)-送货更准时、价格更超值、上新货更快</t...
苏宁首页-手机端
weixin_44768794的博客
01-12 416
苏宁首页案例制作rem适配方案1代码import导入样式固定定位rem适配方案2代码 呈现图 rem适配方案1 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,m
东北狼仙-织梦仿站获取网站的iconfont字体图标字体方法
东北狼仙
03-07 636
好久没有仿站了突然碰到这个问题，随心所欲的就发布了一下获取网站iconfont字体图标方法 首先找到CSS文件下载打开 搜索@font-face 查找类似代码 @font-face { font-family:’iconfont’; src: url(‘http://www.hrbsem.com/css/fonts/iconfont.eot’); src: url(‘http:/www....
移动端之rem+flexible.js布局
fine1998_的博客
05-29 1914
前言 今天粉丝涨到100了，总之感谢大家的关注！ 最近在学习移动端的页面布局，用的技术方案是rem+flexible.js，这篇文章就带大家一起感受下它的魅力吧~ 一、移动端简介 1、什么是移动端布局 移动端布局，顾名思义，就是html在手机（或者ipad）上显示的页面布局。与PC端不同在于，需要适配各种移动端的不同屏幕尺寸（采用移动端布局技术方案），并且只需要处理webkit内核浏览器即可（兼容性好）。 2、视口 视口（viewport)就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视
移动端开发rem+flexible.js布局
05-29
利用rem+flexible.js布局进行移动端机器人首页页面的布局，em+flexible.js是一种比较简便的布局方式，适合移动端开发新手学习观看。
html5 移动界面 lex + rem + + flexible.js + LESS
03-20
html5 移动界面 lex + rem + + flexible.js + LESS
苏宁flexible.js+rem.zip
03-19
苏宁flexible.js+rem.zip
手机端用rem+scss做适配的详解
09-27
主要介绍了手机端用rem+scss做适配的详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
rem适配js文件flexible.js和echartPxToRem.js
02-22
用于页面上使用rem，和echarts使用rem适配
前端移动Web第三天：苏宁首页-第二种简洁高效的rem适配方案flexible.js
m0_46597922的博客
04-19 657
简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效 移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html 文字大小就可以了 比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以 ...
移动端三种布局方式之rem布局-苏宁首页（技术方案一：less、rem、媒体查询）
JadeDu_的博客
08-21 475
结果图 em是相对于父元素的字体大小来说的，rem（root em）是相对于html元素来说的， less编译器的使用 css样式写在less文件里 自动生成css文件 后续方便修改 和rem布局搭配使用 rem实际开发啊适配方案1 元素大小的取值：（1）页面元素的rem值=页面元素之（px）/（屏幕宽度/划分的份数）                    (2)屏幕宽度/划分的份数就
大前端Dux主题如何添加导航菜单字体图标
东北狼仙
10-10 1257
对于刚刚接触大前端Dux主题的小伙伴来说，想要在短时间内折腾出一个漂亮大气的网站博客，也并不是那么容易，因为大前端Dux主题的功能真的很多很多，你自己都不知道从那里下手。今天跟小伙伴们说说大前端Dux主题如何添加导航菜单字体图标，Dux主题是默认加载font-awesome（字体图标），只要我们在菜单名称前添加字体图标的代码就可以了。 第一步，进入菜单管理界面，“外观”–“菜单”，...
WordPress PHPMYADMIN无法登录，提示503 Service Unavailable
东北狼仙
10-11 706
服务器用的阿里云服务器，目前环境是PHP7.1，MYSQL是5.6，Apache 2.4，之前PHP版本是5.6的时候还可以登录管理数据库，现在已经完全登录不进去，非常确认服务器无大型网站，无占资源程序，只可能是宝塔的程序出现了问题。 Service UnavailableThe server is temporarily unable to service yourrequest due to...
2019几大主流的前端框架，几款目前最热门的前端框架
东北狼仙
12-17 649
如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富。 要做WEB前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念： HTML负责结构，网页想要表达的内容由html书写。 CSS负责样式，网页的美与丑由它来控制 JS负责交互，用户和网页产生的互...
关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等
东北狼仙
12-28 606
无标题文档 一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 /*css样式*/ <style type=”text/css”> div{ width: 150px; height: 60px; background: skyblue; overflow...
织梦dedecms漏洞修复大全(5.7起)
东北狼仙
10-22 564
很多人说dedecms不好，因为用的人多了，找漏洞的人也多了，那么如果我们能修复的话，这些都不是问题. 好，我们来一个一个修复。修复方法都是下载目录下该文件，然后替换或添加部分代码，保存后上传覆盖(记得先备份)，这样的好处是防止用懒人包上传之后因为UTF8和GBK不同产生乱码，或者修改过这几个文件，然后直接修改的部分被替换掉，那之前就白改了，找起来也非常的麻烦。如果你搜索不到，...
如何使用flexible.js+rem
最新发布
06-07
首先，需要在HTML的<head>标签内引入flexible.js文件，例如： ```html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Website</title> <script src="path/to/flexible.js"></script> </head> ``` 然后，在CSS文件中使用rem作为单位，例如： ```css .selector { font-size: 1rem; padding: 0.5rem; } ``` 在这里，1rem代表的是页面的根元素字体大小，而不是固定的像素大小。而flexible.js会根据设备的屏幕宽度动态设置根元素的字体大小，从而实现页面的自适应。 需要注意的是，在使用rem作为单位时，需要考虑到不同屏幕的像素密度（即设备像素比），可以使用媒体查询来针对不同的设备像素比设置不同的根元素字体大小，例如： ```css @media only screen and (min-device-pixel-ratio: 2) { html { font-size: 40px; } } ``` 这里的@media查询会在设备像素比为2或以上时，将根元素字体大小设置为40px。这样，使用rem作为单位时，不同像素密度的设备都能够正确地显示页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值