开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

css适配手机屏幕大小

CSS适配手机屏幕大小

基础概念

CSS（层叠样式表）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。适配手机屏幕大小是指通过CSS技术使网页在不同尺寸和分辨率的手机屏幕上都能良好显示。

相关优势

用户体验：适配不同屏幕大小的网页能够提供更好的用户体验，确保内容在不同设备上都能清晰可见。
响应式设计：通过响应式设计，网页能够自动调整布局和样式，适应不同的屏幕尺寸。
减少维护成本：一次设计，多设备适配，减少了为不同设备单独设计和维护的成本。

类型

媒体查询（Media Queries）：通过CSS3的媒体查询功能，可以根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的样式。
弹性布局（Flexbox）：通过Flexbox布局，可以使元素在不同屏幕尺寸下灵活调整位置和大小。
网格布局（Grid Layout）：CSS Grid布局提供了二维布局的能力，能够更精细地控制网页在不同屏幕尺寸下的布局。

应用场景

移动网站：确保网页在手机浏览器中能够良好显示。
响应式网页设计：适用于需要同时支持桌面和移动设备的网站。
单页应用（SPA）：确保单页应用在不同设备上都能流畅运行。

示例代码

以下是一个使用媒体查询和Flexbox实现响应式布局的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .box {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
        }
        @media (min-width: 600px) {
            .box {
                width: 45%;
            }
        }
        @media (min-width: 900px) {
            .box {
                width: 30%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
    </div>
</body>
</html>

参考链接

通过以上方法和技术，可以有效地实现CSS适配手机屏幕大小，确保网页在不同设备上都能提供良好的用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

css适配屏幕尺寸大小自适应

改新模板的时候考虑到单独适配手机端排版美化。只需要在css内写好窗口大小相对应的样式。访问就根据窗口大小自动使用相应的样式。下边是我写的适配样式，可参考。框架可拿去用，类和样式需根据自身调整。...效果如下图:图片示例如下:/*移动端适配开始*//*手机端适配常规尺寸*/@media (max-width:768px) {.hh_usertop .user_av img { float:...important;}}/*iphone X 适配*/@media only screen and (device-width:375px) and (device-height:812px) and...important;}.hh_ziliao { margin-left: -80px;}}/*iPhone 5/SE适配*/@media only screen and (device-width...important;} }/*移动端适配结束*/

7.2K2 0

【Android 屏幕适配】屏幕适配基础概念 ④ ( 屏幕适配限定符 | 手机平板电脑设备屏幕适配 )

文章目录一、屏幕适配限定符二、手机/平板电脑设备屏幕适配平板电脑市场占有率密度无关像素计算手机设备限定符平板设备限定符参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持...一、屏幕适配限定符 ---- Android 系统加载应用资源时 , 会根据当前运行应用的设备的相关属性 , 如 : 屏幕尺寸 / 屏幕像素密度 / 宽高比 / 屏幕方向等属性 , 加载不同的屏幕适配限定符目录下的资源...16:9 ; long : 比标准屏幕要长的屏幕 , 如 20:9 , 21:9 ; notlong : 标准屏幕 ; 二、手机/平板电脑设备屏幕适配 ---- 平板电脑市场占有率 Android..., 其中的 xx 是横向的密度无关像素 ( DIP , Desity Independent Pixels ) 值 , 单位是 dp / dip ; 在【Android 屏幕适配】屏幕适配基础概念...在布局或图片目录名称中 , 加上 sw360dp 限定符 , 几乎兼容所有的手机设备 ; 当前市面上的手机 , 屏幕宽度很少有超过 360 dp 的 ; 只要横向密度无关像素 \rm

8.2K2 0

css @media 查询和屏幕适配

css语法 @media mediatype and|not|only (media feature) { CSS-Code; } 媒体类型值描述 all 用于所有设备 print 用于打印机和打印预览...screen 用于电脑屏幕，平板电脑，智能手机等。...max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。 max-device-height 定义输出设备的屏幕可见的最大高度。...rem 单位相对于html标签font-size大小屏幕适配例子适配320px、414px、640px、750px、768px为例子说明 640px 为基准, 平分20份 css/1.css"> 首页分类

1.7K2 0

【Android 屏幕适配】屏幕适配基础概念 ③ ( 屏幕像素密度 DPI 与素材大小关联 | 屏幕像素密度 DPI 与屏幕密度限定符关联 )

文章目录一、屏幕像素密度 DPI 与素材大小关联二、屏幕像素密度 DPI 与屏幕密度限定符 xhdpi 关联参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持一...、屏幕像素密度 DPI 与素材大小关联 ---- 屏幕像素密度 DPI 与素材大小关联 : 屏幕像素密度 ( DPI , Dots Per Inch ) 为 120 dpi 时 ( ldpi ) ,...; 屏幕像素密度 DPI 与屏幕密度限定符关联 : ldpi : \rm 0 < dpi \leq 120 , 对应图标大小 36 \times 36 ; mdpi : \rm 120...: \rm 240 < dpi \leq 320 , 对应图标大小 96 \times 96 ; xxhdpi : \rm 320 < dpi \leq 480 , 对应图标大小 144...x 192 大小的图标 , 图标数据一般只保留这一个即可 ;

4.5K3 0

Android手机全面屏（18：9屏幕）适配指南

暂且不论所谓全面屏如何定义，作为Android开发者更多关心的是屏幕适配的兼容性。全面屏刚出来的时候并不可怕，可怕的是后来出现了一些异形全面屏——把屏幕挖掉一块的那种异类！...全面屏手机大致思路都是压缩额头与下巴，屏幕比例从传统的16：9变为18：9，提高屏占比以及屏幕内的虚拟导航键，本文将简要介绍全面屏适配中一些需要注意的东西以及解决方案。...适配指南一、声明最大屏幕高宽比在应用配置文件AndroidManifest.xml中显式声明支持的最大屏幕高宽比（maximum aspect ratio）。...鉴于目前全面屏屏幕比例，将ratio_float设置为2.1即可适配一众全面屏手机。...结语总的来说，全面屏的到来为沉闷的手机ID设计带来了些惊喜，虽然不少开发者骂娘，但还是应当顺应历史潮流，况且很多情况Android系统早已有适配方案了不是？

2.3K1 0

Android手机全面屏（18：9屏幕）适配指南

从小米MIX 1发布以来，越来越多所谓“全面屏”手机发布，如三星S8，小米MIX2，VIVO X20，Google Pixel2等等…2017年下半年开始，“全面屏”将大范围覆盖，低至千元机水平，就像当年手机屏幕从...暂且不论所谓全面屏如何定义，作为Android开发者更多关心的是屏幕适配的兼容性。全面屏刚出来的时候并不可怕，可怕的是后来出现了一些异形全面屏——把屏幕挖掉一块的那种异类！...全面屏手机大致思路都是压缩额头与下巴，屏幕比例从传统的16：9变为18：9，提高屏占比以及屏幕内的虚拟导航键，本文将简要介绍全面屏适配中一些需要注意的东西以及解决方案。...适配指南一、声明最大屏幕高宽比 1.1:在应用配置文件AndroidManifest.xml中显式声明支持的最大屏幕高宽比（maximum aspect ratio）其中 ratio_float 为高宽比...鉴于目前全面屏屏幕比例，将ratio_float设置为2.1即可适配一众全面屏手机。

2.3K1 0

手机游戏开发中，Unity中的屏幕适配技术

在Unity中，常用的屏幕适配技术有两种：固定宽高比适配和多分辨率适配。 1....固定宽高比适配（Fixed Aspect Ratio）固定宽高比适配是指在游戏运行的过程中，保持游戏画面的宽高比不变，适应不同尺寸的屏幕。...根据当前设备的屏幕宽高比，来确定实际游戏画面的显示区域。如果当前设备的宽高比与目标宽高比不一致，可以通过调整Camera的Size或Viewport Rect的位置和尺寸来实现画面的适配。...当前设备的屏幕宽高比为4:3。如果当前设备的高度较宽，需要调整Camera的Size（镜头的视野）来适配。...以上就是Unity中的屏幕适配技术和具体实现方法的解释和示例。

4.3K3 0

iOS 屏幕适配

现在开发iOS无非就是用xib和纯代码开发，不论用什么方式开发都少不了屏幕适配。这只是个人开发中使用的方法也不一定是最好的方法，仅供交流和分享使用。...Xib 屏幕适配关于xib屏幕适配要注意两点 1.字体大小适配 2.控件约束适配 xib字体适配 UILable 为例子 #import NS_ASSUME_NONNULL_BEGIN...bounds.size.width/kDesignWidth; return scaleSize; } @end Macro #ifndef Macro_h #define Macro_h // 基准屏幕宽度...(iphone 6) #define kDesignWidth 375.0 // 以屏幕宽度为固定比例关系，来计算对应的值。...利用IBInspectable关键字和分类 1.写一个NSLayoutConstraint的分类,添加adapterScreen的属性（Bool 值，yes代表需要对屏幕进行等比例适配） #import

1.9K2 0

flutter 屏幕适配

屏幕适配之屏幕算法既然是算法适配就必然少不了获取屏幕宽高，我们用的就是媒体查询（MediaQuery），下面是封装方法过后的，当然直接使用也是可以的： // 整屏宽度 double winWidth...context) { return MediaQuery.of(context).size.height; } 案例1：蓝湖设计图有一张轮播图，宽度是 335 高度是 120，左右间隔是10，如何使用屏幕算法适配全机型屏幕宽和高..., color: Colors.amber.withOpacity(0.5), ), child: new Text('模拟图片'), ), 效果图片图片这就是一个普通的屏幕算法适配例子...，使用的是小学数学里的常用加减乘除，用了多少就用整个的减多少，很常见也很简单很实用，在企业开发中用到这套就已经能完全适配所有屏幕了，主要是灵活应变。...不过能用组件来适配的还是建议使用组件。

1.7K1 0

基于320px屏幕用css给ipad做适配

@media screen and (width: 768px) and (orientation: portrait) { body{ ...

7161 0

15.屏幕适配

屏幕适配主流屏幕: 1280*720, 遵循原则: 不用AbsoluteLayout(绝对布局), 多用相对布局&线性布局(权重), 要用dp,不用px 开发后期, 在不同分辨率屏幕上测试(480...图片适配不是很常用，分别在drawable各放一套图，但会导致软件体积很大布局适配不是很常用, layout-800x480 专门适配480*800的屏幕尺寸适配 dp和px的关系: dp...density); 320*240(0.75), 480*320(1),480*800(1.5),1280*720(2) values->dimens.xml values-1280x720 权重适配...android:weightSum="3" 代码适配获取屏幕宽高,动态计算控件大小在智慧北京引导页下面的圆点写死了，侧边栏也在大屏幕会拉出很长，现在修改： 1.创建工具类 public class...params.leftMargin = DensityUtils.dp2px(this, 10);// 设置圆点间隔 } point.setLayoutParams(params);// 设置圆点的大小

1.1K8 0

15.屏幕适配

屏幕适配主流屏幕: 1280*720, 遵循原则: 不用AbsoluteLayout(绝对布局), 多用相对布局&线性布局(权重), 要用dp,不用px 开发后期, 在不同分辨率屏幕上测试(480...图片适配不是很常用，分别在drawable各放一套图，但会导致软件体积很大布局适配不是很常用, layout-800x480 专门适配480*800的屏幕尺寸适配 dp和px的关系: dp...density); 320*240(0.75), 480*320(1),480*800(1.5),1280*720(2) values->dimens.xml values-1280x720 权重适配...android:weightSum="3" 代码适配获取屏幕宽高,动态计算控件大小在智慧北京引导页下面的圆点写死了，侧边栏也在大屏幕会拉出很长，现在修改： 1.创建工具类 public class...params.leftMargin = DensityUtils.dp2px(this, 10);// 设置圆点间隔 } point.setLayoutParams(params);// 设置圆点的大小

6301 0

浅谈 Android 屏幕适配

支持每种密度的位图可绘制对象的相对大小适配方案密度独立性应用显示在密度不同的屏幕上时，如果它保持用户界面元素的物理尺寸（从用户的视角），便可实现“密度独立性” 。...Android 系统可帮助您的应用以两种方式实现密度独立性：系统根据当前屏幕密度扩展 dp 单位数系统在必要时可根据当前屏幕密度将可绘制对象资源扩展到适当的大小 nodpi：它可用于您不希望缩放以匹配设备密度的位图资源...可用的宽度也是确定是否对手机使用单窗格布局或是对平板电脑使用多窗格布局的关键因素。因此，您可能最关注每部设备上的最小可能宽度。...图标的适配在进行开发的时候，我们需要把合适大小的图片放在合适的文件夹里面。...建议以高分辨率作为设计大小，然后按照倍数对应缩小到小分辨率的图片。一般情况下，我们只需要提供3套切图资源就可以满足安卓工程师的适配，分别是 HDPI、XHDPI、 XXHDPI 3套切图资源。

2.5K1 0

Flutter之屏幕适配

Flutter 暂时没有官方的屏幕适配方案，在 Flutter 项目开发中目前大部分的适配方案都是通过比例来进行适配，是一个通用的适配方法，该适配方法也在前端、Android、iOS、小程序等开发中广泛使用...但是如果有特殊需求也可以使用高度来进行适配，比如需求要求是 banner 占屏幕的 1/4 ，或者要求内容刚好一屏显示，这个时候设置控件的高度时就可以采用高度单位来进行适配。...flutter_screenutil flutter_screenutil 就是基于上述比例适配原理而实现的屏幕适配库。目前最新版本是 5.0.1，在 GitHub 上拥有 2.8k 的 star 。...可通过如下 api 获取宽高以及字体的适配数值： ScreenUtil().setWidth(540) //根据屏幕宽度适配尺寸 ScreenUtil().setHeight(200) //根据屏幕高度适配尺寸...(一般根据宽度适配即可) ScreenUtil().radius(200) //根据宽度或高度中的较小者进行调整 ScreenUtil().setSp(24) //字体大小适配传入的参数即为设计图上的大小

3K2 0

Android适配全面总结（一）----屏幕适配

由于Android碎片化严重，导致开发中一套代码在不同手机上运行起来效果不是很好，兼容性不是很好，这就需要对不同分辨率，不同屏幕大小的手机做屏幕适配。 2、版本适配。...由于Android是开源的，不同的手机厂商有自己定制的ROM，对系统的api可能有变更，也有可能新增一些api，所以在开发中，要针对不同厂商的手机做一些特殊适配。...单位：dpi（dots per inch）假设设备内每英寸有240个像素，那么该设备的屏幕像素密度=240dpi 不同手机屏幕大小对应的屏幕像素密度关系表：密度类型代表的分辨率（px）屏幕像素密度...图片资源适配使得图片资源在不同屏幕密度上显示相同的像素效果。在实际开发中一个按钮的背景图片必须能够随着按钮大小的改变而改变。...` 本文参考文章： Carson_Ho：Android 屏幕适配：最全面的解决方案 cocopeng：Android屏幕适配全攻略（最权威的官方适配指导）郭霖： Android官方提供的支持不同屏幕大小的全部方法

5.6K6 0

【Android 屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI )

文章目录一、Android 与 iOS 屏幕宽高比种类二、屏幕像素密度参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持一、Android 与 iOS 屏幕宽高比种类...---- Android 屏幕尺寸类型如下 , 安卓设备的屏幕尺寸复杂性远远高于 iOS 设备 , Android 设备有两万种屏幕类型 , iOS 只需要适配五种分辨率即可 ; iOS 屏幕尺寸如下..., 只需要适配有限的几种屏幕类型即可 ; 二、屏幕像素密度 ---- 屏幕像素密度的单位是 DPI , 是 Dots Per Inch 的缩写 , 也就是每英寸的像素点个数 ; 屏幕尺寸...指的是屏幕斜对角的英寸长度 ; 假设屏幕尺寸为 6.5 寸 , 屏幕的宽高分辨率为 1080 \times 1920 , 计算该屏幕的屏幕像素密度 ( DPI , Dots Per Inch...3253 ② 然后计算每英寸的像素个数 : DPI = \cfrac{对角线像素个数}{屏幕尺寸} = \cfrac{3253}{6.5} \approx 500

7.6K3 0

Android屏幕适配框架（二）

由于上一篇框架需要控件重新渲染一次，对于大型项目性能方面运行不够快，针对该问题进行优化核心思想：自定义组件，在组件的onMeasure中就改变控件的长宽等属性实现方法：自定义百分比组件，使用该组件自动适配该组件下所有子...float heightPercent = ((IGetPercent) layoutParams).getHeightPercent(); //适配不同屏幕...width_percent="0.5" /> 结论：在测量方法onMeasure中就完成对控件的适配

9791 0

Android屏幕适配（使用ConstraintLayout）

前言：有一个还在上大学的小学弟问博主有没有啥屏幕适配简单的方法，把鸿洋大神的帖子发给他，他说看不懂，鉴于其学Android的时间很短，所以自己出一篇比较容易的简单方法的帖子（百分比适配）。...这张图就适配好位置了。同理：适配第二张图新建两线，将两线位置分别定在%89，%93.5。...最后：为ConstraintLayout布局设置一个背景两款手机以及平板运行效果图如下 xml代码如下 <?xml version="1.0" encoding="utf-8"?

5591 0

iOS屏幕适配概述1 屏幕适配简介2 Autoresizing3 Auto Layout

[toc] 1 屏幕适配简介 1.1 屏幕发展历史手机型号 |屏幕大小 | 分辨率 ------------ | ------------- 4, 4S |3.5 | 320480 5,5C,5S...iOS版本 | 适配技术 | Xcode版本 | 正式版发布时间 | 手机机型 ----------|----------- |-----------|----------- iOS 5 | Autoresizing...(无需屏幕适配) 而且一个应用要么是横屏要么是竖屏, 几乎不存在能同时进行横竖屏切换的应用应用程序都是竖屏游戏几乎都是横屏官方应用大多支持横竖屏使用 Autoresizing 进行屏幕适配随着...iPad 的发布, 屏幕的物理尺寸发生了变化并且苹果建议，在 iPad 上运行的程序如果没有特殊原因，应该支持横竖屏切换因此：不能把控件的 frame 都写死了，需要进行屏幕适配为了解决屏幕适配需求...当 iPhone6 发布以后，苹果设备的屏幕越来越多(以后也可能出现更多不同大小的屏幕)，为了能更容易的适配不同的屏幕，苹果推出了 Size Classes 技术通过 Auto Layout 设置的约束

2K3 0

android webview加载html图片自适应手机屏幕大小&点击查看大图

我们在开发中，显示信息详情时，一般后台会给出html文本，在android端一般采用webview控件来展示，但是后台给出的html文本一般是给电脑端用的，没有自适配手机，导致手机端图片显示过大，需要左右移动来查看全图...下面给出几种实用方法，达到在手机端用webview展示html中的图片，能自适应手机屏幕展示。...需要用webview控件进行展示html文本，为使文字也自适应手机屏幕大小，需要先对android webview控件的属性进行相应设置，这里bindingView.contentWv代表webview...img.style.height = 'auto'; " + "}" + "})()"); } 1 1 如果只需要图片自应手机屏幕大小...总结上面三种方法，都能达到webview中图片自适应用手机屏幕大小，但三种方法，笔者更多的是采用第三种方法来实现。使用虽然复杂一些，但是不用引入第三方库，方便控制。

7.7K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭