移动端css（流式布局，flex布局，rem，媒体查询，清除特殊样式）

最新推荐文章于 2023-02-27 15:40:48 发布
最新推荐文章于 2023-02-27 15:40:48 发布
阅读量443 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CxOneCom/article/details/115604021
版权
本文介绍了移动端布局的一些关键技巧，包括如何清除特殊样式，运用流式布局实现响应式设计，深入理解并应用flex布局以创建灵活的盒模型，以及使用rem单位进行尺寸调整。同时，还探讨了媒体查询在不同设备和屏幕尺寸下的应用，以确保跨平台的兼容性和用户体验。
摘要由CSDN通过智能技术生成

清除特殊样式

 /*点击高亮我们需要清除，设置为transparent*/
 -webkit-tap-highlight-color: transparent;
  /*在移动端浏览器默认的外观上在ios上加上这个属性才能给按钮和输入框自定义样式*/
  -webkit-appearance: none;
  /*禁用长按页面时的弹出菜单*/
  -webkit-touch-callout: none;

布局

流式布局
最低0.47元/天 解锁文章
CxOneCom
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css居中布局（除flex） 总结
qq_38253873的博客
03-18 915
Css居中布局 总结 水平方向居中 1.text-align:center （父元素）+display:inline-block(子元素) 优点： 浏览器兼容性比较好（语法都是css2） 缺点： Text-align属性具有继承性，导致子级元素文本也是居中布局的 （需要单独再设置子元素） 2.display:table/block + margin:0 auto（子元素） 优点： 只需要对子级元素...
完美扫清Flex布局
不停
03-17 1635
文章目录一 初识flex二 flex container上的CSS1. flex-direction（决定main axis的方向）2. justify-content（决定flex items 在main axis的对齐方式）3. align-content（决定flex items 在cross axis上的对齐方式）4. align-items（决定flex items在cross axis...
FLEX 如何彻底清空
05-07
在FLEX 里,解决FLEX 占用内存一直不减，无法清除的问题
CSS：rem文字适配，Flex布局
m0_51785393的博客
06-24 170
CSS：rem文字适配，Flex布局
html 清除flex,css如何重置flex项的'display'属性_css3_开发99编程知识库
weixin_42347660的博客
06-17 3654
我試圖將基於表和JS的舊布局轉換為新的Flexbox，並通過保持舊瀏覽器的表向後兼容。問題是，沒有 display:flex-item 可以替代舊的display:table-cell 樣式。我嘗試了不同的定義，比如 display:inherit，display:initial，但無法重置顯示定義以正常工作。username, email, etc./* CSS Table Layout */....
不对称的流式布局
06-29
本资源包括： 1）28个页面（都是响应式的流式布局） 2）404特效页面 3）win8 风格的流式布局
flex流式布局
xin123____的博客
03-11 1377
文章目录移动web开发流式布局1.0 移动端基础1.1浏览器现状1.2 手机屏幕的现状1.3常见移动端屏幕尺寸1.4移动端调试方法2.0 视口2.1 布局视口 layout viewport2.3理想视口 ideal viewport2.4meta标签3.0二倍图3.2背景缩放background-size4.0 移动开发选择和技术解决方案4.2 移动端技术解决方案4.3 移动端大量使用 CSS3盒子模型box-sizin4.4移动端特殊样式5.0移动端常见布局移动web开发——flex布局1.0传统布局和
移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局
m0_53619602的博客
06-09 1267
前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。 单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。...
移动端布局 flex布局 移动端适配 响应式布局 BootStrap
qq_43206800的博客
09-20 1415
移动端布局 viewport（视口） 视口：PC端的页面直接放入手机屏显示，不友好。内容原因没有设置viewport； 视口：浏览器（PC、移动端）显示页面内容的屏幕区域；不同的屏幕的大小，我们看到的区域也是不同的；viewport就是为了解决上面问题； 语法 默认：HTML980px； 理想：手机屏幕多大，HTML就设置是多大； meta标签设置： <meta name="viewport" content="width=device-width, user-scalable=no, initia
浅谈CSS3中display属性的Flex布局的方法
01-21
最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex .container { display: flex; flex-direction: column; align-items: center; background-color: #b3d4db; } 编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么究竟这个属性是干嘛用的呢？ Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
移动端常见布局
HXL521666的博客
11-09 3624
移动端技术选型 1.单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 2.响应式页面兼容移动端（其次） 媒体查询 bootstrap 流式布局（百分比布局） 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动Web开发使用的比较常见的布局方式 max-width(max-height)最大宽度 min-widt
css 清除浮动的方法
gu_eu的博客
03-08 499
css 清除浮动 浮动布局、定位布局、百分比布局为css中布局的常用的布局方式，而且兼容性会比较好。随着flex的流行，以后会是主流，但IE10以下不兼容flex布局。 float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，被设置了 float 的元素会脱离文档流（可以清空格）。 清楚浮动的概念 在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮
CSS：Flex布局
李建雨的博客
11-12 740
Flex布局的优势和特点 flex布局是一种浏览器提倡的布局方式，它的渲染性能较高。现在市面上大半部分浏览器都能对flex布局进行兼容（IE9.0以下不能兼容）。flex布局的简单，能够方便地将子盒子放在父盒子的两侧、将多个子盒子用多种方式在父盒子内部进行排列，并且不用担心子盒子类似于浮动的脱标问题。 Flex布局的组成部分 1、弹性容器 即是父盒子，在父盒子css中添加display：flex；此时父盒子被称为“弹性容器”。 <head> <meta charset=
html布局自然流加浮动,CSS中的流式布局，浮动布局，层布局，flex布局
weixin_35032509的博客
06-11 353
CSS中的流式布局，浮动布局，层布局，flex布局[toc]1. 流式布局流式布局: 标准文档流布局对的方式：从上向下，从左到右进行布局男盒子独占一行，女盒子并排显示，女盒如果一行撑满了，自动换行。2. 浮动布局浮动布局: 让块标签进行并排显示2.1浮动的特点浮动会脱离标准流(没有完全脱离文档流)1.如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排，如果后面的元素内部有文字，这些...
css position 彻底弄清
u012174809的专栏
02-17 185
开发N年，对于css的position还是弄不清。但看了下面这张图，我的世界立马就清晰了。 CSS position 属性
css样式之flex弹性盒布局
最新发布
m0_72642533的博客
02-27 814
要使用flex布局，任何一个容器都可以指定成为Flex布局，但是在设为Flex布局后,其子元素的float(浮动)、clear(规定元素哪一侧不允许浮动)和vertical-align(元素垂直对齐方式)属性将失效。5个值：flex-start、flex-end、center、space-around、space-between
容器边框跳动
qq_41915899的博客
09-10 258
实现的样式是这样的 直接贴代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=..
css弹性盒
m0_70877859的博客
07-18 1555
拉伸，在没有设置高度的情况下，会默认拉伸撑开到整个母盒子的高度。space-around距离环绕，第一个盒子与第二个盒子的距离正好是第一个盒子与大盒子的距离，左右外边距一致。3.弹性盒居中，只有一个元素的时候，加marginauto;适用主轴方向，横轴为主轴，则占满宽度，纵轴为主轴，则占满宽度。默认值为1，空间不够会产生挤压，更改值为0，就不允许被挤压，align-selfflex-end;则div1占1/5，daiv2占1/5，div3占3/5。align-selfflex-start;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值