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

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

VSCODE 需要安装cssred

index.html 页面代码

<!DOCTYPE html>

<head>

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

</head>

<body>

</div>

</div>

</div>

</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;

}

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

动画自动滚动div/像素基础知识/手机端样式选择/
大体上和原网页差不多,一个主页和一个子页面动画自动滚动div: <!DOCTYPE html> <html> <head> <meta charset=&q ...
手机端密码键盘（weiKeyBoard.js）
背景公司最近项目上要做手机端支付,支付时需要使用自定义键盘.网上找了些,没找到称心如意的,看时间还算充裕就自己写了个. 功能描述样式上与微信的密码键盘一样. 当前版本1.0. 数字位置可设定为随机 ...
php 手机端播放器,用JS代码适配电脑端和手机端播放器代码
用JS代码适配电脑端和手机端播放器代码蓝叶网站设计 2016-08-10 10668 9评论随着html5的崛起,很多网站都采用html5代码来设计,让网站美观大气,但是 ...
手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
php自动识别pc和手机端并跳转,JS如何实现网站中PC端和手机端自动识别并跳转对应的代码...
1. 代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现P ...
zepto.js手机端开宝箱动画js特效
下载地址 zepto.js实现的手机端开宝箱动画特效 dd:
用HTML+CSS+less做一个rem布局苏宁手机端商城页面含源码分享
效果如下所示: less需要事先下载node,具体下载过程百度搜索安装即可整体文件夹如下: 源码分享:https://pan.baidu.com/s/1IqhFh7V3SoTW8KShGP7kgA ...
东北狼仙：什么是好设计？
这是一个很难说得清楚的问题,好使要从多个不同的层面去评论,如艺术评论一样,需要多方面的学术修养和客观又具主见的观点去评论. 与艺术不同,好设计一定要圆满地完成他的实用目的. 设计一件工具不好用,设计一 ...

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

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

最新文章

热门文章