移动端条件CSS高度 - 腾讯云开发者社区

文章/答案/技术大牛

发布

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓...在国产的猎豹浏览器以及其他一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.不过没关系,大部分的常见布局问题,我都能解决掉.但是,下面这个….我真心有点费解.不过,没关系,通过我的研究,最终还是很快用CSS...问题是,设备的宽度是不固定的哦,那么问题就是,在不知道具体宽度的时候,如何来设定它对应的高度呢? 也就是说,如何在CSS中,找到一个高度和宽度挂钩的属性.只要存在这个参数,那么,问题就能解决.... CSS...在我们遇到一些问题的时候,尤其是布局这种问题,我们要考虑的是,能不能用CSS解决,而不时一位的去考虑JS.毕竟,JS是用来交互的,而CSS是用来布局的.

2.4K1 0

移动端css解决图片高度无法百分比问题妙用

移动端布局，div按比例布局，宽度为百分比，高度和宽度一样，即让div为正方形 html 一个正方形 css div{ width:100%; height:0;...padding-top:100%; } 如此便可实现一个正方形，完美解决移动端！

7921 0

您找到你想要的搜索结果了吗？

是的

没有找到

总结 | 移动端 CSS 常用小结

分类：总结，CSS 难度：★☆ Meta 标签移动端页面添加 meta 标签，可以让文档的宽度与设备的宽度保持1:1，文档的最大宽度比例是1.0，不允许用户点击屏幕放大浏览。...border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } css3...快速回弹在 iOS 上如果想让一个元素拥有像 Native 的滚动效果，可以这样写 overflow-y: scroll; -webkit-overflow-scrolling: touch; css3

1.6K3 0

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

一、webkit 内核移动端浏览器都是基于 webkit 内核的 , QQ 浏览器 / 百度 / Safari / UC 都是基于 webkit 内核的 ; 移动端网页布局需要兼容普通浏览器...与 webkit 浏览器 ; webkit 内核浏览器对 HTML5 + CSS3 支持的很好 , 移动端可以放心使用 H5 标签和 CSS3 样式 , 但是如果在 PC 浏览器使用了这些标签 , 可能导致低版本浏览器不兼容的情况...; 二、移动端网页 CSS 初始化 - normalize.css ---- 移动端网页的 CSS 初始化 , 一般使用 normalize.css 样式文件 , 该初始化文件有以下优点 : 对有价值的默认值进行了初始化...; 修复浏览器的相关 BUG ; 实现了模块化 ; 提供了详细的文档 ; 下载地址 : https://necolas.github.io/normalize.css/ normalize.css...normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ============

2.3K1 0

css移动端适配最佳实践

移动端适配，在移动端里经常有遇到，在不同分辨率移动端设备精确还原UI设计稿，这是一个令人抓狂的问题，好在有flex，box布局解决了自适应很大一部分问题。...rem适配这种方案在早期移动端...62.5%时，我们利用rem单位设置元素单位，1rem=10px,所以当设计稿750像素时，量尺寸20px,那么你实际单位换成rem时，就是2rem,原有尺寸缩小10倍即可，这种方案会有一定误差，但也基本满足移动端自适应...js 本文code example[1] 参考资料 [1]code example： https://github.com/maicFir/lessonNote/tree/master/html/08-移动端适配方法

1.6K2 0

css - 移动端reset汇总与注释

1.解决移动端触摸a元素，会有蓝色阴影正常状态：点击时状态： a{ outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0);

1.9K6 0

vue编写的移动端条件搜索条组件

vue-filter-bar vue编写的移动端条件搜索条组件 Introduction 利用vue开发的移动端条件搜索条组件，方便在移动端进行多条件下搜索，提高用户的体验度，高速提取用户所要浏览的搜索条件...(注：筛选结果的value返回json对象) Issues 筛选返回数据类型筛选条件返回的数据是json对象，及下图中： ? 对应的value值是对象类型，需使用for in循环去获取数据。

2.3K2 0

移动端布局伸缩、设置div高度等比例缩放

问题描述首先写一个移动端布局的div出来看看，示例如下： ? 随着移动端的屏幕大小，div的布局宽度是设置100%，所以可以跟着变化。...但是高度是固定写了10rem的高度，这样是无法随着宽度变化进行等比例变化的。 ?...那么解决这个问题的关键就是，因为高度是使用rem单位设置的，只要随着屏幕的宽度变化，设置html的font-size大小变化，就可以控制高度的变化。...可以看到，随着宽度变化，高度也相应有了变化了。示例完整代码如下 <!...window.addEventListener('resize',calc); })(); 移动端高度等比例问题

3.5K2 0

完美解决CSS移动端半像素边框

最近在做公司的页面重构工作，因为这次重构有一些非常执着的设计同学，对于半像素极度喜爱，所以我们前端开发痛不欲生。经过一番挣扎，最后总结了一下半像素做边框的一些问...

1.4K3 0

移动端兼容系列 HTML与CSS兼容

HTML5学堂：本文，我们将继续为大家总结介绍移动端的常见兼容问题，今天要提的是关于移动端HTML与CSS当中，遇到的一些常见兼容问题，主要包括取消电话号码的识别、取消邮箱识别以及横向rem的问题。...对于移动端的兼容问题，由于内容较多，决定书写成一个系列。在这些杂乱知识的发现与整理，主要来源于几个讲师平时的积累，而自己的学生们也为内容的充实做出了很大的贡献，在此非常感谢~！...移动端兼容 - 取消电话号码识别具体情形：在iPhone上页面中的数字识别为电话号码。...解决方法：在网页文件的文件头部设置如下代码即可： <meta content="telephone=no" name="format-detection" / 移动端兼容 - 取消电子邮箱识别具体情形...具体百分比以及rem的选择，之前写过比较详细的文章，可以查看——>移动端页面的开发方法 - 系列

6.3K6 0

Flex布局：兼容移动端与PC端的CSS魔法

二、Flex布局在移动端的应用移动端设备屏幕尺寸多样，用户操作习惯也各不相同。因此，在移动端应用中，Flex布局能够发挥出巨大的优势。以下是一个简单的Flex布局在移动端的应用示例： Flex布局在移动端的应用...三、Flex布局在PC端的应用及兼容性问题虽然Flex布局在移动端表现出色，但在PC端使用时也需要考虑兼容性问题。低版本的浏览器可能不支持Flex布局，这就需要我们采取一些兼容性措施。...以下是一个兼容PC端的Flex布局示例： Flex布局在PC端的应用

8941 0

CSS解决高度坍塌

什么是高度坍塌默认情况下当父元素不设置高度的时候父元素的高度是靠子元素撑大的，也就是说子元素有多高，父元素就有多高；但是当子元素加了浮动之后，子元素就脱离了文档流，这时候父元素就会发生高度坍塌现象。...先看没有高度坍塌的时候的样式：代码：解决高度坍塌...=edge" /> 解决高度坍塌...=edge" /> 解决高度坍塌

2.5K2 0

移动端兼容适配js+css全局样式

这是研究了淘宝和拉钩以及网易的兼容全局样式后，提取的兼容样式，经过实战可用 css全局样式 @media screen and (max-width:321px){ body,html{font-size

9.4K2 0

Css-移动端适配总结前言PC端Mobile总结参考&引用

前言工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rem\em\css px\device px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~ PC...端本文主要是讲解移动端的响应式布局，但是在真正进入之前，先了解一些概念。...三个viewport 前面介绍了viewport的概念，但是在移动端的时候， viewport并不那么容易理解， ppk在移动端提出了三个viewport的概念。...css像素和设备像素在移动端中， 1个css像素并不等于1个设备像素，而是取决于设备像素比（物理像素（设备像素）/独立像素（css像素）），像Iphone的Retina屏幕，就有2倍屏（ip6s）...最后，移动端 iOS 8 以上以及 Android 4.4 以上已经有了vw\vh单位， 1vw\1vh相当于viewport的百分之一宽/高，也就是我们上面所说的x单位，如果你的手机支持该api，

3.2K2 0

条件选择css

CSS .select_row{ float:left;width:100%; height:22px; margin-bottom:5px} .select_row a{height

9391 0

css - 移动端h5在iphonex的适配

1 @media only screen and (device-width:375px) and (device-height:812px) and (-we...

9605 0

01-移动端开发教程-CSS3新特性

移动端开发课程概述移动互联网的兴起，让移动端的开发迅速蹿红。对于前端开发者来说，移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。...这边课程内容包括： CSS3新特性新选择器边框、背景升级、圆角、阴影新的盒模型渐变、动画、2D3D转换伸缩布局、多列布局新单位在线字体图标前缀应用、浏览器兼容、渐进增强媒体查询移动端适配开发方案...响应式布局开发方案移动端js、触屏事件 zepto.js\bootstrap\iScroll.js\fastclick.js等移动端库移动端开发调试移动端完整项目 2....关于CSS3的学习 2.1 CSS3学习手册学习CSS3最好的工具就是文档。有文档在手，按照文档多练习一些案例，就能掌握。CSS算是比较容易学习的前端技术了。...宽度和高度都不包含内容的边框（border）和内边距（padding）。 border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。

3.4K7 0

05-移动端开发教程-CSS3兼容处理

CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。...的实验性的属性前需要添加前缀，目前大部分常用的css3新属性都可以直接舍弃前缀。...vscode 自动化插件: Autoprefixer，可以自动化的给css、less、sass文件进行自动化的添加css3前缀。.../src/css/*.css']) .pipe(autoprefix('last 2 versions')) .pipe(gulp.dest('....gulp 在线文档：地址 5. sass、less等预处理语言 sass和less等css的预处理语言配合响应的编译工具也可以实现对css3中的新属性的自动化加前缀处理。

2.2K6 0

05-移动端开发教程-CSS3兼容处理

CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。...的实验性的属性前需要添加前缀，目前大部分常用的css3新属性都可以直接舍弃前缀。...vscode 自动化插件: Autoprefixer，可以自动化的给css、less、sass文件进行自动化的添加css3前缀。 ?.../css/')); // 最终文件输出的位置 }); 可以根据你的情况修改路径，当前默认是你项目根目录下有个css目录，自动为css目录下面的所有文件自动创建一个*.min.css对应文件，就是最终使用的...gulp 在线文档：地址 5. sass、less等预处理语言 sass和less等css的预处理语言配合响应的编译工具也可以实现对css3中的新属性的自动化加前缀处理。

2.5K12 0

CSS 中 100vh 在移动端浏览器地址栏缩放下的高度陷阱与 dvh 的落地实践

做移动端全屏页面时，用height:100vh铺满屏幕几乎成了条件反射。但真机上经常遇到一个别扭的现象：页面底部被浏览器地址栏挡住一截，或者用户向下滚动、地址栏收起后，原本应该贴底的按钮浮在屏幕中间。...结果就是首屏渲染时100vh比实际可视高度大，内容溢出；地址栏收起后布局又对不上。...早期大家用JS监听resize动态写--vh变量来绕，后来CSS规范引入了dvh，配合env(safe-area-inset-bottom)能较干净地处理。...原因是Safari的工具栏会参与可视区域的挤压，而此时100vh仍然按工具栏隐藏时的最大高度计算。...CSS规范后来补了视口单位：svh（小视口，地址栏展开时的高度）、lvh（大视口，地址栏收起时的高度）、dvh（动态视口，随地址栏变化实时更新）。

1251 0

点击加载更多

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

移动端css解决图片高度无法百分比问题妙用

总结 | 移动端 CSS 常用小结

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

css移动端适配最佳实践

css - 移动端reset汇总与注释

vue编写的移动端条件搜索条组件

移动端布局伸缩、设置div高度等比例缩放

完美解决CSS移动端半像素边框

移动端兼容系列 HTML与CSS兼容

Flex布局：兼容移动端与PC端的CSS魔法

CSS解决高度坍塌

移动端兼容适配js+css全局样式

Css-移动端适配总结前言PC端Mobile总结参考&引用

条件选择css

css - 移动端h5在iphonex的适配

01-移动端开发教程-CSS3新特性

05-移动端开发教程-CSS3兼容处理

05-移动端开发教程-CSS3兼容处理

CSS 中 100vh 在移动端浏览器地址栏缩放下的高度陷阱与 dvh 的落地实践

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐