一、访问地址

多快好省，购物上京东！

二、技术选型

方案：我们采取单独制作移动页面方案
技术：布局采取流式布局

三、搭建相关文件夹结构

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
<!-- 引入移动端初始化css文件 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入自己写的首页的css文件 -->
<link rel="stylesheet" href="css/index.css">

五、常用初始化样式

/* 给 body 进行样式初始化 */
body {min-width: 320px;max-width: 540px;margin: 0 auto;background-color: #fff;font-size: 14px;line-height: 1.5;font-family: -apple-system,Helvetica,sans-serif;
}

六、特殊样式

/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

七、二倍精灵图做法

7.1在firework里面把精灵图等比例缩放为原来的一半

默认情况下：该图片是400*400的尺寸，是二倍精灵图的尺寸。

通过手动选中该位图，然后将宽高度除以2，进行缩放位图，然后锁定位图，防止发生变化。

7.2之后根据新的大小测量坐标

将量取后尺寸，增添一个负号，然后写入代码中即可。

7.3注意代码里面background-size也要写:精灵图原来宽度的一半

我们原始的图片是400*400，那么如果我们不设置background-size的话，它是按照400*400图片的尺寸进行精灵图的定位选择的，不是我们想要的，所以我们应该把尺寸改为200*200解决该问题。

（50）流式布局—京东移动端首页制作案例相关推荐

移动端+京东移动端首页制作
一:移动端的viewport 手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题 ...
移动WEB开发之流式布局-京东案例
2. 视口视口(viewport)就是浏览器显示页面内容的屏幕区域. 视口可以分为布局视口.视觉视口和理想视口 2.1 布局视口 layout viewport 视口(viewport)就是浏览器显 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
移动端开发—流式布局
移动端开发-流式布局一.单独制作移动端页面(主流) 通常情况下,网址域名前加m(mobile)可以打开移动端,通过判断设备,如果是移动端设备打开,则跳转到移动端页面二.响应式页面兼容PC端移动端( ...
移动布局——流式布局
流式布局文章目录流式布局 1. 什么是流式布局 2. 固定布局和流式布局比较 3.流式布局的缺点 3.弹性布局 3.1 弹性盒子属性--父容器属性 1.flx-direction属性 2.flex ...
Flutter 流式布局、自动换行（Wrap、Flow）
文章目录流式布局 Wrap Flow 流式布局流式布局在移动端是非常常见的,比如商品列表,瀑布流.标签页等等.使用Android原生来实现流式布局还是有点麻烦的,甚至需要自定义view或者使用第三 ...
移动端开发——京东首页制作（流式布局）
移动端开发--京东首页制作(流式布局) 项目准备初始化基本文件夹创建index.html 设置视口引入基本公共样式引入自己的css样 <!DOCTYPE html> <htm ...
京东移动端首页-流式布局
京东移动端首页采用流式布局(百分比布局) 采用流式布局(百分比布局) 主要源码: <!DOCTYPE html> <html lang="en">< ...
02移动端布局基础之流式布局项目实战(京东移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.技术选型方案:采取单独制作移动页面方案技术:布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 ``` < ...

（50）流式布局—京东移动端首页制作案例