(html+css)_移动端适配方案一（流式布局）

一、前言

二、主要内容

1、移动端面对的问题：因为手机屏幕和尺寸不一样，当我们用不同手机设备浏览的时候为了提高用户体验必须要做移动端适配

2、解决方案一: 流式布局 + viewport视口进行设置

流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            background: pink;
        }
        /*流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局*/
    </style>
</head>
<body>
    <div class="box">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
</body>
</html>

01流式布局.html

演示效果如下：当我们缩放浏览器窗口的时候，里面的内容像水流一样，跟着浏览器窗口适应

Viewport：比如当我们将照片放到相框中的时候，如果照片比较大就需要缩小照片尺寸。这个viewport就相当于嵌套在照片外面的一个虚拟的宽度，这样我们将网页放到viewport中的时候就可以缩放网页。但是在移动端的时候由于窗口比较小可能导致看不清楚文字等。

是移动端特有。这是一个虚拟的区域，承载网页的。

3、要做到适配必须满足如下几个要求

1）网页尺寸的宽度必须和浏览器保持一致

2）默认显示的缩放比例要和pc端保持一致（缩放比例是1.0）

3）不允许用户自行缩放网页

4、适配设置以及参数配置    

标准适配方案：

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

快捷方式：meta:vp + tab

参数配置：

width 可以设置宽度（width = device-width）设置当前视口为当前设备宽度
height 可以设置高度
initial-scale 可以设置默认的缩放比例
user-scalable 可以设置是否允许用户自行缩放（user-scalable=yes/no）
maximum-scale 可以设置最大缩放比例
minimum-scale 可以设置最小缩放比例

5、以京东首页为例

     一、准备篇

（1）做移动端适配之前需要处理一些基本的样式

/*=======reset css========*/
*,
*::before,
*::after{
    /*所有的标签，和伪元素都选中*/
    margin: 0;
    padding: 0;
    /*移动端常用布局是非固定像素*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮效果的清除*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
input,textarea{
    border: none;
    outline: none;
    /*不允许改变尺寸*/
    resize: none;
    /*元素的外观  none没有任何样式*/
    -webkit-appearance: none;
}
/*=======common css========*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.clearFix::before,
.clearFix::after{
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
}
.m_l10{
    margin-left:10px;
}
.m_r10{
    margin-right:10px;
}
.m_t10{
    margin-top:10px;
}
.m_b10{
    margin-bottom:10px;
}
/*使用精灵图的公用样式*/
[class^="icon_"],[class*=" icon_"]{
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    background-size: 200px 200px;
}

（2）根据设计样式搭好布局

（3）设置图的尺寸准备。

1.最大宽度设置成了640px
    2.设计稿psd的尺寸就是640px
    3.目的：当设备的尺寸比设计稿不至于失真
    4.640px的尺寸设计稿的原因：根据当前主要流行的设备尺寸有关系iphone4,4s 尺寸320px
    5.750px的设计稿：参考原型iphone6 尺寸375px
    6.最小宽度320px 保证最小的宽度320px不让页面错乱

所以设置好container版心的最大宽度和最小宽度

/*版心*/
.jd_container{
    min-width: 320px;/*最小尺寸*/
    max-width: 640px;/*最大尺寸*/
    width: 100%;
    margin: 0 auto;
}

     一、开始篇

（一）顶部收索框的流式布局。

1、分析：当缩放窗口的时候，搜索框的左右两边的大小是固定的，只是input框的宽度会缩放。

2、布局

 <!--顶部搜索-->
    <header class="jd_search">
        <div class="jd_search_box">
            <a href="#" class="red icon_logo"></a>
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="占位符">
            </form>
            <a href="#" class="login">登录</a>
        </div>
    </header>

3、css样式

/*顶部搜索*/
.jd_search{
    width: 100%;
    height: 40px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}
/*内容居中*/
.jd_search .jd_search_box{
    height: 40px;
    background: rgba(201,21,35,0.85);
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.jd_search .jd_search_box .icon_logo{
    position: absolute;
    left: 10px;
    top: 4px;
    width: 60px;
    height: 36px;
    background-position: 0 -103px;
}
.jd_search .jd_search_box .login{
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
}
.jd_search .jd_search_box form{
    width: 100%;
    padding-left:70px;
    padding-right:50px;
    position: relative;
}
.jd_search .jd_search_box form .icon_search{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 80px;
    top: 10px;
    background-position: -60px -109px;
}
/*百分比的计算：基于父容器的内容的宽度*/
.jd_search .jd_search_box form input{
    width: 100%;
    height: 30px;
    margin-top:5px;
    background: #fff;
    border-radius: 15px;
    padding-left: 40px;
}

顶部样式

（二）轮播图

1、分析：因为手机滑动第一张和最后一张的时候为了避免六百，轮播的显示图片会比显示的多出两张

2、布局：

3、样式

.jd_banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.jd_banner ul:first-child{
    width: 1000%;
    transform: translateX(-10%);
    -webkit-transform: translateX(-10%);
}
.jd_banner ul:first-child li{
    width: 10%;
    float: left;
}
.jd_banner ul:first-child li a{
    display: block;
    width: 100%;
}
.jd_banner ul:first-child li a img{
    display: block;
    width: 100%;
}
.jd_banner ul:last-child{
    position: absolute;
    width: 118px;
    height: 6px;
    left: 50%;
    margin-left:-59px;
    bottom: 6px;
}
.jd_banner ul:last-child li{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #fff;
    margin-left:10px;
    float: left;
}
.jd_banner ul:last-child li:first-child{
    margin-left:0;
}
.jd_banner ul:last-child li.now{
    background: #fff;
}

轮播图样式

（三）导航

1、分析：在收缩窗口的时候只是导航之间的间距进行了收缩，图片并没有收缩、所以我们需要将图片的大小设置为固定的。

2、布局

  <!--导航栏-->
    <nav class="jd_nav">
        <ul class="clearFix">
            <li><a href="#"><img src="images/nav0.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav1.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav2.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav3.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav4.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav5.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav6.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav7.png" alt=""><p>分类</p></a></li>
        </ul>
    </nav>

3、样式

/*导航栏*/
.jd_nav{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #ccc;
}
.jd_nav ul{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.jd_nav ul li{
    width: 25%;
    float: left;
}
.jd_nav ul li a{
    display: block;
    width: 100%;
}
.jd_nav ul li a img{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
.jd_nav ul li a p{
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 5px 0;
}

nav

（四）京东超市模块

1、分析：由于这个模块的样式比较相似，所以我们可以将公共的样式提取出来

2、结构：

3、组合样式

/*组合样式的使用*/
.w_50p{
    width: 50%;
}
.w_50p img{
    display: block;
    width: 100%;
}
.bl{
    border-left:1px solid #ddd;
}
.br{
    border-right:1px solid #ddd;
}
.bb{
    border-bottom:1px solid #ddd;
}

三、总结

1、解决手机端图片失真问题

假设图片的大小为400px * 400px

background: url(image.png)  no-repeat 0 -103px / 200px 200px;

压缩之后定位也需要压缩为原来的一半

2、解决img与文字之间的上下间隙问题

font-size:0px;

display:block /*给图片设置*/

vertical-align:middle/*给图片设置*/

原文地址：https://www.cnblogs.com/xxm980617/p/11198208.html

时间： 2024-10-08 01:52:45

(html+css)_移动端适配方案一（流式布局）的相关文章

移动端布局学习之流式布局1

1.移动端基础 1.1 浏览器现状 国内的UC和QQ 百度等手机浏览器都是根据Webkit修改过来的内核,国内目前尚无自主研发的内核,就像国内的手机系统基本上都是局域安卓修改开发的一样. 意思就是:兼容移动端主流浏览器 处理Webkit内核浏览器即可. 1.2 手机屏幕的现状 移动端设备屏幕尺寸非常多,碎片化严重 Android设备有多种分辨率480*480 480*854 540*960 720*1280 等等 近年来iPhone的碎片化也严重了 其设备的主要分辨率有 640*960 640*

移动端适配方案

Flexible适配方案 最早的文章,是15年阿里手淘团队的移动端适配方案. 设计师常选择iPhone6作为基准设计尺寸,交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变). 前端开发人员通过一套适配规则自动适配到其他的尺寸. 先了解一些基本概念 视窗viewport 简单理解,viewport是严格等于浏览器的窗口,在桌面浏览器中,viewport就是浏览器窗口的宽度高度. 但是在移动端的viewport太窄,为了能更好的为css布局服务,所以提供了两个vie

rem移动端适配方案

一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素字体大小为基准 二.js计算 为了避免造成因为动态设置<html>元素的font-size而造成页面抖动,一般这部分代码我们放在header底部去加载,并内联到html文档里面. <script> const oHtml = document.getElementsByTagName(

0083 移动端WEB开发之响应式布局、bootstrap

移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果. 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列

CSS流式布局 仿京东

个人自学demo. 效果图: 地址:https://files-cdn.cnblogs.com/files/y112102/JdH5.7z 总结: 1:流式布局 宽度使用百分比. 2:默认样式 body { width: 100%; /* 最小最大宽度 */ min-width: 320px; max-width: 640px; /* 居中 */ margin: 0 auto; font-size: 14px; font-family: -apple-system, Helvetica, san

移动端WEB开发之响应式布局

1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果. 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕

移动端适配方案研究

初次接触移动端的时候,以为终于可以不用像pc那样考虑令人头疼的ie浏览器兼容问题,有强大的css3的帮助,可以随心所欲..可是后来才发现原来移动端各种层次不齐的终端更会让人抓耳挠腮,同样的页面在不同的手机上显示的完全不一样的效果,于是抛开功能,页面适配性也成了一个大的课题. 说到移动端,下面这一行代码大家一定不陌生: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s

移动端适配方案以及rem和px之间的转换

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

h5移动端适配方案

flex布局 flex布局,不使用rem,直接使用px. <!DOCTYPE html> <html> <head> <title></title> <style> /*利用flex属性,可以实现块级元素1:1:1*/ /*简单的就能使里面的内容居中(尤其是垂直居中,好用到爆)*/ .box{ display: flex;width: 50px;height: 30px; /*默认 row*/ flex-direction:colum