移动端布局与响应式开发

最新推荐文章于 2022-11-15 20:51:46 发布
最新推荐文章于 2022-11-15 20:51:46 发布
阅读量335 收藏
点赞数
分类专栏： HTML CSS Web 文章标签： 移动端 响应式开发 HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36823300/article/details/100355046
版权
Web 同时被 3 个专栏收录
23 篇文章 1 订阅
订阅专栏
HTML
21 篇文章 1 订阅
订阅专栏
CSS
6 篇文章 0 订阅
订阅专栏

1、移动端布局

1）手机的基本概念

（1）屏幕分辨率

iPhone5的屏幕分辨率为1136×640，指手机的竖排有1136个像素，横排有640个像素。即屏幕像素为72.7万。

并不是屏幕的分辨率越高屏幕越大，屏幕的大小由屏幕的尺寸决定，屏幕的尺寸指屏幕对角线的长度，一般单位为英寸。

（2）物理像素与CSS像素

上面提到的iPhone5的屏幕分辨率指的是物理像素。物理像素的单位为dp（点），属于设备无关像素值，设备能控制显示的最小单位，可以把这些像素看成显示器上一个个的点。

CSS像素也叫逻辑像素，是浏览器使用的抽象单位，iPhone5的CSS像素为568×320。CSS像素的单位为px，是指通常做网页时用到的CSS像素。在PC设备上1个物理像素等于1个CSS像素，但在移动端iPhone5上4个物理像素等于1个CSS像素。

屏幕分辨率是指物理像素，而实际屏幕大小对应的是CSS像素。物理像素进行压缩处理，使4个物理像素对应1个CSS像素，目的是为了显示高清的效果，这种技术叫做Retina高清视网膜屏。

（3）PPI

PPI全称是pixel per inch，即每英寸内有多少个像素点，其像素点指的是物理像素，可表示像素密度。PPI的值越高，画质越好，即越细腻。通过以下公式换算。

PPI值越高说明屏幕越清晰，一般把PPI值大于320的设备，都可以看作是Retina高清视网膜屏。

（4）DPR

DPR全称是devicePixelRatio，中文叫作“像素比”。DPR值是物理像素与CSS像素的比值，可以是横排像素比，也可以是竖排像素比。在iPhone5下无论是横排还是竖排，DPR值都为2。DPR可通过JavaScript语法window.devicePixelRatio语法来获取，DPR值对于布局是有帮助的，可以通过DPR值进行换算处理。

 

2）viewport

移动端布局中会涉及到一个viewport的概念。在移动端viewport有两个，visual viewport即视口viewport和layout viewport即布局viewport。

视口viewport在布局viewport上方，且视口viewport大小固定不变，而布局viewport大小可随时改变。

视口viewport的大小是固定的，这样会导致布局viewport值越大viewport窗口就缩小越多，同时显示的内容也就越多。虽然能看到整个页面，但看不清页面的细节。需要通过双指进行滑动放大处理，这样会给用户带来使用不便的体验。

 

通过<meta>标签可以对viewport属性进行重新设置。

<meta name="viewport" content="属性1=值1，属性2=值2">

name属性用来指定viewport方式，而content属性用来对viewport进行具体值的设置，可选设置有width、initial-scale、minimum-scale、maximum-scale和user-scalable五种选择。

（1）width

width用于设置布局viewport的特定值，可以设定一个具体的数值，如320、450等。移动端设备的尺寸差异很大，因此一般不设置固定值。width属性有device-width值，可以根据屏幕的宽自动调整，始终与屏幕的宽保持相同，从而达到适配不同设备的目的。

<meta name="viewport" content="width=device-width">

（2）initial-scale

initial-scale用于设置页面的初始缩放比例，一般不会对页面进行缩放处理，因此也就不用设置最小或最大缩放，一般取值为1或1.0。

<meta name="viewport" content="initial-scale=1.0">

（3）minimum-scale

minimum-scale用于设置最小缩放，一般不会让用户进行缩放处理，因此也就不用设置最小或最大缩放，一般取值为1或1.0。

<meta name="viewport" content="minimum-scale=1.0">

（4）maximum-scale

maximum-scale用于设置最大缩放，取值与minimum-scale相同。

（5）user-scalable

user-scalable表示用户能否进行缩放处理，可选值为yes和no。一般情况下，不需要对页面进行缩放处理，因此取值为no。

<meta name="viewport" content="user-scalable=no">

常见的viewport设置如下所示，但不代表所有的页面都采用同一个viewport设置。

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

 

2、弹性盒模型

为了解决传统布局的不足，CSS3增加了新型的弹性盒模型。通过弹性盒模型，可以轻松地创建自适应浏览器窗口的流动布局。

1）flex方式

CSS3通过display属性的flex值来实现弹性盒模型。对于两个未知宽高的父子元素，左右居中比较容易实现，而上下居中不太容易实现，使用flex弹性盒模型可以很容易实现两个未知宽高的父子元素，子元素在父元素中上下居中显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main {
            width: 150px;
            height: 150px;
            border: 1px black solid;
            display: flex;
        }
        #box {
            width: 50px;
            height: 50px;
            background: red;
            margin: auto;
        }
    </style>
</head>

<body>

    <div id="main">
        <div id="box"></div>
    </div>

    <script>
    </script>

</body>

</html>

2）排列与对齐

在CSS3弹性盒模型中，可以使用flex-direction属性定义弹性盒子内部子元素的排列方向，也就是盒子内部的子元素的排列方向。

flex-direction属性取值及排列方向
属性值子元素排列方向
row（默认值）默认的排列方向为水平排列
row-reverse反向水平排列，靠右侧进行展示，注意第一项子元素在最右侧
column垂直排列
column-reverse反向垂直排列，靠下方进行排列展示，注意第一项子元素在最下方

反向水平排列和反向垂直排列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main1 {
            width: 200px;
            height: 200px;
            border: 1px black solid;
            display: flex;
            flex-direction: row-reverse;
        }
        #main2 {
            width: 200px;
            height: 200px;
            border: 1px black solid;
            display: flex;
            flex-direction: column-reverse;
        }
        .box {
            width: 50px;
            height: 50px;
            background: red;
            color: white;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="main1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="main2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <script>
    </script>

</body>

</html>

 假设flex-direction属性取值为row时，水平排列，因此把水平方向看作“主轴”。主轴有对应的主轴对齐方式。主轴对齐方式通过justify-content属性进行设置。

justify-content属性取值及主轴对齐方式
属性值主轴对齐方式
flex-start（默认值）左对齐
flex-end右对齐
center居中对齐
space-between两端对齐，元素之间的间隔都相等
space-around每个元素两侧的间隔相等。元素之间的间隔比元素与边框的间隔大一倍

justify-content属性值及主轴对齐方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main1 {
            width: 200px;
            height: 100px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        #main2 {
            width: 200px;
            height: 100px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
        #main3 {
            width: 200px;
            height: 100px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        #main4 {
            width: 200px;
            height: 100px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        #main5 {
            width: 200px;
            height: 100px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .box {
            width: 50px;
            height: 50px;
            background: red;
            color: white;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="main1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="main2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="main3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="main4">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="main5">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <script>
    </script>

</body>

</html>

注意，当flex-direction属性取值为column时，垂直方向变成了“主轴”，因此以上排列方向均变成垂直方向上的对齐操作。

除了主轴外，弹性盒模型还提供了侧轴的概念，侧轴表示与主轴相反的方向。align-items属性表示侧轴对齐方式。

align-items属性取值及侧轴对齐方式
属性值侧轴对齐方式
flex-start起始位置对齐
center居中位置对齐
flex-end结束位置对齐

align-items属性的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main1 {
            width: 200px;
            height: 100px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: flex-start;
        }
        #main2 {
            width: 200px;
            height: 100px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }
        #main3 {
            width: 200px;
            height: 100px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: flex-end;
        }
        .box {
            width: 50px;
            height: 50px;
            background: red;
            color: white;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="main1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="main2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="main3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <script>
    </script>

</body>

</html>

3）换行与对齐

在默认情况下，元素都排在一条轴线上。当内容太多，使元素在一条轴线排不下时，则需要用到flex-wrap属性。

flex-wrap属性取值及换行方式
属性值换行方式
nowrap（默认值）元素不进行换行处理
wrap换行处理，第一行在上方
wrap-reverse反向换行处理，第一行在下方

flex-wrap属性的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main1 {
            width: 200px;
            height: 150px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
        #main2 {
            width: 200px;
            height: 150px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        #main3 {
            width: 200px;
            height: 150px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap-reverse;
        }
        .box {
            width: 50px;
            height: 50px;
            background: red;
            color: white;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="main1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div id="main2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div id="main3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>

    <script>
    </script>

</body>

</html>

align-content属性表示多行之间的对齐方式。

align-content属性取值及多行的对齐方式
属性值多行对齐方式
flex-start多行的起点对齐
flex-end多行的终点对齐
center多行的居中对齐
space-between多行的两端对齐，轴线之间的间隔平均分布
space-around每根轴线两侧的间隔都相等。因此轴线之间的间隔比轴线与边框的间隔大一倍

align-content取值为space-between和space-around时的对齐方式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main1 {
            width: 200px;
            height: 150px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-between;
        }
        #main2 {
            width: 200px;
            height: 150px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
        }
        .box {
            width: 50px;
            height: 50px;
            background: red;
            color: white;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="main1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div id="main2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>

    <script>
    </script>

</body>

</html>

4）子元素属性

（1）order属性

order属性定义元素的排列顺序。数值越小，排列越靠前，默认为0。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main {
            width: 200px;
            height: 150px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
        }
        .box {
            width: 50px;
            height: 50px;
            background: red;
            color: white;
            line-height: 50px;
            text-align: center;
        }
        .box:nth-of-type(1) {
            order: 1;
        }
        .box:nth-of-type(2) {
            order: 2;
        }
    </style>
</head>

<body>

    <div id="main">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>

    <script>
    </script>

</body>

</html>

（2）align-self属性

align-self属性允许单个元素有与其他元素不一样的对齐方式，可以设置值为flex-start、flex-end、center等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main {
            width: 200px;
            height: 150px;
            border: 1px black solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
        }
        .box {
            width: 50px;
            height: 50px;
            background: red;
            color: white;
            line-height: 50px;
            text-align: center;
        }
        .box:nth-of-type(1) {
            align-self: center;
        }
        .box:nth-of-type(2) {
            height: 80px;
            line-height: 80px;
        }
    </style>
</head>

<body>

    <div id="main">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>

    <script>
    </script>

</body>

</html>

（3）flex属性

flex属性设置元素之间占据的空间大小，值为比例值，也可以设置固定的像素值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main {
            width: 200px;
            height: 50px;
            border: 1px black solid;
            display: flex;
        }
        .box {
            color: white;
            line-height: 50px;
            text-align: center;
        }
        .box:nth-of-type(1) {
            background: red;
            flex: 1;
        }
        .box:nth-of-type(2) {
            background: blue;
            flex: 2;
        }
        .box:nth-of-type(3) {
            background: green;
            flex: 3;
        }
    </style>
</head>

<body>

    <div id="main">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <script>
    </script>

</body>

</html>

当设置其中一列为固定值时，可实现一列固定两列自适应的布局方案。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性盒模型</title>
    <style>
        #main {
            width: 200px;
            height: 50px;
            border: 1px black solid;
            display: flex;
        }
        .box {
            color: white;
            line-height: 50px;
            text-align: center;
        }
        .box:nth-of-type(1) {
            background: red;
            flex: 1;
        }
        .box:nth-of-type(2) {
            background: blue;
            flex: 100px;
        }
        .box:nth-of-type(3) {
            background: green;
            flex: 1;
        }
    </style>
</head>

<body>

    <div id="main">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <script>
    </script>

</body>

</html>

 

3、响应式开发

1）媒体查询

响应式开发是利用CSS3当中的媒体查询功能来实现的，即@media方式。使用@media查询，可以针对不同的媒体类型和屏幕尺寸来定义不同的样式操作。

@media 媒体类型 and 媒体条件 {}
媒体类型取值及含义
取值含义
all用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕、平板电脑、智能手机等
speech应用于屏幕阅读器等发声设备
媒体条件取值及含义
取值含义
max-width定义输出设备中的页面最大可见区域宽度
min-width定义输出设备中的页面最小可见区域宽度
max-height定义输出设备中的页面最大可见区域高度
min-height定义输出设备中的页面最小可见区域高度
orientation定义输出设备中的页面为portrait竖屏还是landscape横屏

下面定义媒体查询当屏幕满足最小宽度值为500px时，执行此CSS样式；当屏幕小于500px时，则不执行此CSS样式。

<style>
    @media all and (min-width:500px) {
        #box {
            width: 100px;
            height: 100px;
            background: red;
        }
    }
</style>
<body>
    <div id="box"></div>
</body>

多条件查询，当屏幕满足最小宽度值为500px，并且同时满足最大宽度值为700px时，执行此CSS样式；当屏幕小于500px或是大于700px时，都不执行此CSS样式。

<style>
    @media all and (min-width: 500px) and (max-width: 700px) {
        #box {
            width: 100px;
            height: 100px;
            background: red;
        }
    }
</style>

当页面在横屏时，执行此CSS样式；当页面在竖屏时，不执行此CSS样式。

<style>
    @media all and (orientation: landscape) {
        #box {
            width: 100px;
            height: 100px;
            background: red;
        }
    }
</style>

关键词“not”是用来排除某种制定的媒体类型，即用来排除符合表达式的设备。换句话说，not关键词表示对其后的表达式执行取反操作。下面代码表示竖屏时，执行此CSS样式。

<style>
    @media not all and (orientation: landscape) {
        #box {
            width: 100px;
            height: 100px;
            background: red;
        }
    }
</style>

除了可以直接在CSS样式中添加媒体查询外，还可以通过<link>的方式添加媒体查询的操作。

<link rel="stylesheet" href="media.css" media="all and (min-width: 500px) and (max-width: 700px)">

2）查询顺序

响应式开发遵循一定的查询原则，下面介绍两个查询的原则。

（1）通用样式写在前面，响应式样式写在后面。因为后面的样式会覆盖前面的样式，因此响应式的目的就是替换之前的样式效果。

（2）当出现多个媒体查询时，先去响应式大屏幕再去响应式小屏幕，达到一种分辨率递减的适配方式。

3）修改样式

一般情况下，响应式的常见修改样式有以下几种。

（1）display属性由block改为none，或是由none转成block，因为移动端页面和PC端页面的尺寸相差很大，可能有些元素在不同的屏幕大小下会显示或者会被隐藏。

（2）width属性从百分比转成具体像素值，或是从具体像素值转成百分比，因为移动端页面的宽度一般需要自适应屏幕的大小，而PC端页面的宽度一般为固定尺寸。

（3）text-align属性从文字端点对齐转成文字居中对齐，或是从文字居中对齐转成端点对齐，因为移动端的文字一般需要居中显示，而PC端的文字一般需要左对齐显示。

（4）float属性从浮动转成不浮动，或是从不浮动转成浮动，因为移动端的布局一般为上下结构，而PC端的布局一般为左右结构。

即将入土的羸弱老年人
关注
专栏目录
移动端之响应式开发
yexiangCSDN的专栏
05-11 297
我是表哥Harker，表妹我来咯~ 移动端单独制作网页的几种主流布局讲完了，本篇讲解响应式布局，响应式布局其实写起来很麻烦，当然如果你不怕麻烦其实能更加增加体验感，这类的布局一般用于商城购物之类以及货币网站这类，虽然推荐使用单独制作布局就行，但有些表妹功力深厚，所以表哥也一定会讲解响应式布局，那么跟我来吧！ 体验三星官网： 1、响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的 2、响应式布局容器 响应式需要一个父级做为布局容器...
移动Web
m0_73198722的博客
09-03 176
二维，三维，flex布局，移动端适配
移动端3：响应式开发
斜光的博客
05-24 396
对于一个项目，我想在电脑上显示，又想在便携式设备上显示，响应式开发就能满足这种需求 响应式开发需要具备的技术栈 @media - css3媒询（核心内容） 移动端开发知识点 因为多设备都可以正常显示，所以在这里，需要用到移动端适配知识点（视口设置） 弹性盒模型 百分比 rem 以上的三种布局方案（弹性盒模型、百分比、rem），都可以运用在响应式中。 媒寻 在 对应的设备 和 规定尺寸 下，才会显示该条件内的样式 媒体设备 all 所有类型的设备 screen h
响应式布局Bootstrap--学习笔记
weixin_43482965的博客
03-05 763
一、响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ <1200px 宽屏设备（大桌面显示器） >= 1200p...
移动Web响应式开发
chuihuan0229的博客
03-13 237
移动Web响应式开发 响应式和原生 响应式开发： 一套代码运行多个端； 优点:开发快、适配好； 缺点：加载速度慢； 纯原生移动web开发： 一套代码运行一个端； 优点: 加载速度快； 缺点：开发慢、适配差； 应用场景 : 响应式开发用在一些新建的网站(PC和移动同时出来)；...
移动端响应式布局
MartinYP的博客
08-10 1316
个人学习笔记
移动端开发-响应式页面
最新发布
Pari_Yang的博客
11-15 691
学会如何去使用**前端 UI 框架**。
移动端布局终极解决方案让移动端布局开发更加容易
08-09
"移动端布局终极解决方案"正是为了解决这一问题，旨在使移动端布局开发变得更加简单易行。 在JavaScript开发中，布局和界面设计常常涉及到CSS（层叠样式表）技术，特别是对于移动端，需要灵活应对不同的设备环境。...
【HTML+CSS】移动端布局之响应式布局+Bootstrap框架
qq_30148319的博客
05-01 1305
学习视频及笔记参考来源： 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、响应式开发 1、响应式开发原理 原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 响应式尺寸 超小屏幕（手机） < 768px 100% 小屏设备（平板） >= 768px ~ <992px 750px 中等屏幕（桌面显示
移动端开发-响应式布局
gj1949的博客
12-30 729
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，当然响应式布局理论上应该是pc端和移动端都是可以的，不过在实际的操作中因为移动端的开发有时候要针对不同的终端，下面我就针对移动端的开发对移动端页面的响应式开发的步骤和原理做下简单的总结。        我们再做移动端开发的时候在布局的选择上，比如弹性布局，百分比布局，流式布局，固定布局等，当然我个人感觉目前比较比较常用的是rem布
响应式的手机端页面开发
ali1995的博客
12-27 2738
响应式的手机端页面开发手机端的页面比PC端的要难吗，其实也不是，对于欠缺设计稿的应用开发，使用框架可以达到美观以及适配手机两个目标，但是对于需要高度定制的，就需要自己去做了适配了网易的做法以下的是我在网上看到的，用起来比较的方便，主要的是rem布局 1. 首先使用<meta name="viewport" content="initial-scale=1,maximum-scale=1, mini
移动web开发响应式布局总结
zerlinda_c的博客
12-17 5926
首先来理解三个概念。一、viewport深入理解　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">　该meta标签的作用是让当前viewport的
移动端—响应式布局
weixin_46191548的博客
02-07 305
移动端开发的两种主流方案之一：响应式布局兼容 (1)内容没有受到(屏幕宽度)明显影响时，自适应宽高即可 (2)内容受到明显的影响时，改变布局，来保证内容的清晰 响应式布局：用于解决不同浏览器，不同分辨率及不同设备的不同显示效果 优点： 1)面对不同分辨率的设备灵活性很强 2)能够快捷的解决多设备显示适应的问题 缺点： 1)兼容各种设备工作量大，效率低，页面加载时间长 2)一定的程度上，会改变网站原...
移动端，响应式布局
lin_fightin的博客
10-02 188
Bootstrap 响应式布局经常用到Bootstrap,首先去官网下载，接着要导入Bootstrap的css和js.然后选择你要的类型，复制其html，style,js代码。在自己修改即可。 栅格系统 首先有个容器 div ,类名为container 一行row 里面有12列 代码：col-lg-x 超大屏幕下分x份 col-md-x 大屏幕 col-sm-x 中屏幕 col-xs-s 小屏幕 hidden-lg超大屏幕下隐藏 -md大屏幕下隐藏 -sm中屏幕下隐藏 -xs小屏幕下隐藏 visible-m
移动端之响应式布局
qq_45256777的博客
09-30 935
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 所以在页面布局较为简单，内容偏少时可以使用响应式布局，而不用为每一个终端做一个页
移动端响应式UI布局策略详解
"本文主要探讨了移动端响应式UI布局的重要性及其常见的七种布局方式：流线布局、等比缩放、拓展布局、分栏布局、流动布局、重复布局和固定布局，旨在帮助产品经理和设计师更好地理解和应用这些布局策略，以适应不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值