移动端开发—流式布局

简介: 移动端开发—流式布局

移动端开发—流式布局

一、单独制作移动端页面(主流)

通常情况下,网址域名前加m(mobile)可以打开移动端,通过判断设备,如果是移动端设备打开,则跳转到移动端页面

二、响应式页面兼容PC端移动端(其次)

  • 通过改变屏幕的宽度来改变屏幕的样式
  • 制作麻烦,需要花很大的精力去调兼容性问题

流式布局(百分比布局)

  • 流式布局,就是百分比布局,也称非固定像素布局
  • 通过盒子的宽度设置成百分比来根据屏幕的来进行伸缩,不受固定像素的限制,内容向两侧填充 流式布局是移动端开发中比较常见的布局方式
max-width:最大宽度
    min-width:最小宽度
    max-height:最大高度
    min-height:最小高度


相关文章
|
3月前
移动端的布局如何使用媒体查询
移动端的布局如何使用媒体查询
47 2
|
13天前
|
编解码 前端开发 iOS开发
响应式布局
响应式布局
|
1月前
|
前端开发 开发者 容器
构建响应式网页布局:Flexbox的力量
【2月更文挑战第23天】 在现代网页设计中,创建能够适应不同屏幕尺寸的响应式布局是至关重要的。Flexbox,一个CSS3引入的强大布局模式,为前端开发者提供了一种更加有效的方式来构建灵活且易于管理的响应式界面。本文将深入探讨Flexbox的核心概念、使用场景和常见误区,并通过实例演示如何利用Flexbox优化布局设计,帮助读者掌握这一强大的CSS工具。
|
1月前
|
编解码 前端开发 JavaScript
现代前端开发中的自适应布局与响应式设计
【2月更文挑战第10天】在当今移动设备和不同屏幕尺寸的普及下,前端开发中的自适应布局和响应式设计变得至关重要。本文将探讨现代前端开发中自适应布局的实现原理、响应式设计的优势以及实际应用中的最佳实践。
|
3月前
|
编解码 前端开发
响应式设计布局要不要了解一下?
响应式设计布局要不要了解一下?
21 0
|
6月前
|
编解码 前端开发 Android开发
前端页面布局之【响应式布局】
前端页面布局之【响应式布局】
39 0
|
编解码 前端开发 UED
实现响应式布局
在现代 Web 开发中,响应式布局已经成为了一个非常重要的概念。由于不同设备有不同的屏幕尺寸和分辨率,需要通过响应式布局来适应不同的设备。实现响应式布局的方式有很多种,下面介绍一些常见的方法。
101 0
|
前端开发
【web前端(上)】视口移动端开发样式
【web前端(上)】视口移动端开发样式
76 0
【web前端(上)】视口移动端开发样式
|
前端开发 开发者 容器
准备-流式布局 |学习笔记
快速学习 准备-流式布局
59 0
|
编解码 前端开发