苏宁首页(less+rem+媒体查询)

方案一(less+rem+媒体查询)

方案:采用单独制作移动端页面

技术选型:rem适配布局(less+ rem+ 媒体查询)

采用750px设计尺寸

步骤

1.搭建相关文件夹结构

image1.png

2设置视口标签及引进css初始化样式

    
    
    
    

3.新建common.less文件

  • 新建commem.less文件,设置好常见的尺寸,利用媒体查询设置不同的html字体大小
  • 关心的尺寸有320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px
  • 划分的分数设置为15等份
  • pc端设置的html字体为50px(写在最上面)

4.新建index.less文件

  • 新建index.less文件 指的是首页的样式
  • 将刚才设置好的common.less文件导入index.less里面。
  • 最后把index.css文件引入html文件中
@import 'common';

link与import的区别

import是指把一个样式文件引入另一个样式文件.

link是指把样式文件引入html中

body样式

// 设置body样式
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;

}

search-content(顶部搜索框)

image.png
思路:采用弹性盒及rem+less+媒体查询等组合方式的布局 中间一定要使用input表单控件中的search按钮,否则会出现bug

banner部分

image.png
思路:容器嵌套img标签,容器的宽高设置rem单位,嵌套的img标签设置为父容器的100%的宽度

广告栏部分

image.png
思路:采用弹性盒技术,父容器嵌套a标签,a标签占用父容器的分数各为1,a嵌套的img标签设置为100%

nav部分

image.png
思路:容器嵌套a标签,a标签采用rem单位,里面嵌套img标签及span标签,img标签和span标签都转换成block(只在rem+less+媒体查询的情况下)

footer部分

image.png

思路:采用rem单位及的弹性盒技术

页面元素的计算公式

页面元素的rem值 = 页面元素值(px) / html font-size 字体大小
## 源码
image.png

https://pan.baidu.com/s/17r5C...

方案二 :rem 适配方案2

简写

image.png

源码

github地址:https://github.com/amfe/lib-flexible

设置

image.png

你可能感兴趣的:(rem,移动端开发)