css-适配布局类型-流式布局-响应式布局

最新推荐文章于 2025-08-05 16:39:15 发布
原创 最新推荐文章于 2025-08-05 16:39:15 发布 · 719 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文讲解了在制作手机界面时采用2倍大小设计的原因，介绍了流体布局的概念，并提供了具体的代码示例。讨论了如何使用calc函数和box-sizing属性解决布局问题，实现响应式设计，确保网页在不同设备上都能正常显示。

制作手机界面时，一般按照2倍的大小去做。

如果设备的宽度大于显示的宽度，可以做一个适配

在这里插入图片描述

流体布局

在这里插入图片描述

来个例子，体验

在这里插入图片描述

在这里插入图片描述

代码
在这里插入图片描述

PC端可适配

在这里插入图片描述

在这里插入图片描述

移动端

在这里插入图片描述

电脑，与移动端都可正常显示

假设，给每一个a标签加上了边框

效果

在这里插入图片描述

期待效果

在这里插入图片描述

在这里插入图片描述

解决办法，一

calc函数，百分比减多出的象素值

左边框2，右边框2，每一个a多出了4象素，减掉就好
在这里插入图片描述

解决方式二

在这里插入图片描述
设置box-sizing:border-box

盒子的尺寸计算方式发生变化

盒子的宽度与高度都是定义的范围内

在这里插入图片描述

响应式布局

流式布局，根据宽口大小适配

但是会有底线

期望，当宽口一定小的时候

如果一行显示四个，变一种布局模式，一行显示两个

在这里插入图片描述

在这里插入图片描述

一行显示四个块块

在这里插入图片描述
23的内容（包括了边框的）

响应式的体验
在这里插入图片描述

在这里插入图片描述

宽度小于四百时

在这里插入图片描述

手机上看

在这里插入图片描述

css适配布局
weixin_47976412的博客
03-20 386
常见的三种适配布局
css适配布局分类
sinat_19594515的博客
11-09 455
一、静态布局（Static Layout） 以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 二、流式布局（Liquid Layout） 也叫百分比布局。 网页中主要的划分区域的尺寸使用百分数（搭配mi...
8.5 CSS3圣杯+流式布局
最新发布
2503_92841156的博客
08-05 351
流式布局，就是百分比布局，也称非固定像素布局，是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度。通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。案例二：使用position定位实现。案例二：使用position定位实现。案例三：使用float浮动实现。案例三：使用float浮动实现。案例一：使用flex实现。案例一：使用flex实现。案例一：使用flex实现。案例二：使用百分比实现。
CSS适配，方案
weixin_30466039的博客
06-02 239
1、尺寸常用单位： https://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html 　　px、em、rem、% 2、CSS的长度单位适配方案 ：https://www.jianshu.com/p/eb237e2c0ecf 3、rem的使用：用px 写CSS，构建时替换为rem 并不提倡直接在代码里写rem，...
CSS适配
apple_58595131的博客
04-14 363
CSS中的单位 常见的CSS预处理器 less
简单的流式布局(完整版)
浅若清兮
05-30 7307
1.首先创建一个自定义View类:public class CustomView extends ViewGroup { private int mleftMargin=20; private int mtopMargin=20; public CustomView(Context context) { this(context,null); } ...
css布局 之 流式布局-原子风格
12-19
流式布局是网页设计中的一种常见布局方式，它允许页面元素根据浏览器窗口大小的变化而自动调整自身尺寸和位置，从而实现响应式设计。在“css布局 之 流式布局-原子风格”这个主题中，我们将深入探讨如何利用...
CSS实现前端响应式布局
m0_54829066的博客
09-06 1749
总之，CSS 实现前端响应式布局是一项非常重要的技术，它可以提高网页的可访问性、可用性和用户体验。通过掌握 CSS 的基础知识、媒体查询、响应式图像和媒体、响应式导航菜单、响应式网格系统等技术，可以实现高效、灵活和自适应的响应式布局。同时，需要注意响应式布局的测试与调试、性能优化和未来发展趋势，不断提高响应式布局的设计和开发水平。是媒体特性的值，如具体的像素值、百分比等。响应式布局的挑战与解决方案。响应式布局的定义与重要性。响应式设计的进一步发展。响应式布局的设计原则。响应式布局的性能优化。
第七天的作业-响应式布局
11-05
响应式布局的实现通常依赖于媒体查询（Media Queries）、流式布局（Fluid Layouts）、弹性图片（Flexible Images）和网格系统（Grid Systems）等技术。媒体查询是CSS3中引入的特性，它允许开发者根据不同的媒体条件...
仿拍鞋网站的商城HTML-适配手机网站模板-响应式-HTML源码
09-30
这个模板设计得既适配手机屏幕，又具备响应式布局，能够根据用户设备的屏幕大小自动调整展示方式，确保在不同设备上都有良好的用户体验。 首先，我们要理解HTML（超文本标记语言）是网页的基础，它是构成网页内容和...
Web-前端html+css从入门到精通 199. 移动端流式布局整页制作（1）.zip
05-23
移动端流式布局整页制作（1）”正是针对这一主题展开，旨在帮助初学者掌握移动端网页的流式布局技术，实现跨设备、全屏适配的页面设计。 HTML（HyperText Markup Language）是构建网页内容的基础，它定义了网页的...
Css-样式适配
ing的博客
03-03 518
http://autoprefixer.github.io/
屏幕适配布局
Aidan Dai
09-13 626
固定宽度，两边留白viewport缩放上面两种方法弊端较多，实现起来也比较简单；赞不记录rem等比例适配html { font-size : 20px; } @media only screen and (min-width: 320px){ html { font-size: 10px !important; } } @media only screen a
适配布局类型
weixin_30480583的博客
03-10 146
PC及移动端页面适配方法 设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：响应式布局+流体布局2、移动端适配： 流体布局+少量响应式 基于rem的布局 流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing ...
样式布局(1) 流式布局，浮动布局，层布局， flex布局
weixin_41545048的博客
11-17 338
4，如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。8，当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性，1，在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上–>向左排。3，如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
（精中求精） rem适配布局
LOxia的博客
03-24 4331
rem适配布局极为详细，含苏宁案例代码
css适配移动端
itaffy的博客
10-13 346
'use strict'; (function(doc, win) { var docEl = doc.documentElement, // 获取html对象 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', // 横屏是否支持，不支持则为浏览器大小改变 ...
CSS-移动适配
m0_66711291的博客
04-05 326
1.适配方案 使用flex布局控制盒子位置，使用rem或vhvw控制盒子大小 2.rem rem 是一个相对单位，1rem 就是 html 文字的大小 html { font-size: 35px; } 此时1rem就是35px 3.媒体查询 可以自动检测视口的宽度，根据不同的视口宽度, 设置不同的根字号 ，就完成了适配 @media (width:375px) { html { font-size: 40px; } } @media (widt
CSS进阶之移动端适配 (四)：媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案
热门推荐
Good Good Study,Day Day Up!
06-06 1万+
是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。可以让我们根据设备的类型（比如：屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改页面@media@importurlmedia属性, , 和其他HTML元素指定特定的媒体类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值