不同尺寸进行适配

于 2024-07-29 13:49:32 发布
阅读量153 收藏
点赞数 2
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42853570/article/details/123082097
版权

1、适应不同分辨率
平板： 2176 * 1600
一体机：1920 * 1080

2、默认平板css
3、入口文件上面添加

4、XX.css 采用媒体文件 @media only screen and (min-width:1920px) and (max-device-width: 1930px){ }

5、使用grid分布

6、使用bootstrap布局；

熙翎
关注
css之移动端适配方案rem与less&媒体查询响应式布局&bootstrap
qq_66318904的博客
03-25 1787
less是一个css预处理器，less文件后缀是.less。扩充了css语言，使css具备一定的逻辑性，计算能力。注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件vscode插件：easy less，保存less文件后自动生成对应的css文件。
利用css实现移动端，ipad，pc端
m0_51651340的博客
05-12 1188
<title>响应式布局</title> <link rel="stylesheet" href="apple-pc.css" media="only screen and (min-width:1000px)"> <link rel="stylesheet" href="apple-pad.css" media="only screen and (min-width: 760px) and (max-width:1000px)"> .
css样式自适应手机+平板+PC
qq1016499728博客
07-09 3243
css自适应手机平板pc
css 响应式布局(媒体查询)，兼容pc，ipad，移动端的布局单位
PrimaryColor
01-10 2204
代码： .box{ width:80%; } //ipad和手机端，默认pc。 @media screen and (max-width: 62rem){ //62rem对应992px，约等于1000px宽度 .newBgTitle{ width:90%; } } @media screen and (max-width: 48rem){ //48rem对应768px，约等于780px宽度 .newBgTitle{ width:
css媒体查询（手机、平板、PC）
qq_41913971的博客
04-25 4015
css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器(≥992px) 大屏幕 大桌面显示器 (≥1200px) /* 超小屏幕（手机，小于 768px） */ @media (max-width: 768px) { ... } /* 小屏幕（平板，大于等于 768px） */ @media (min-w
html+css适配移动端设备
bingqingsuimeng的专栏
04-15 1万+
最近做了一个项目，是用html+css写代码，要求适应所有ipad和andriod平板。以webview/UIWebView为基础，开发出andriod和ipad的APP. 整个页面的制作过程都按照响应式的需求写的： 1.<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,max
详解iOS 关于字体根据不同屏幕尺寸等比适配的问题
08-30
iOS 开发中，字体大小适配是非常重要的一环，特别是在屏幕尺寸不同的设备上，如何让字体大小适应屏幕尺寸的变化是一个普遍的问题。本文将详细介绍如何解决 iOS 中字体大小适配的问题。 一、问题背景 在 iOS 开发中...
Flutter 不同终端适配方案
01-12
使用该插件可以让您的 UI 在不同尺寸的屏幕上都能显示合理的布局。 flutter_screenutil 的核心代码如下： ```dart import 'package:flutter/material.dart'; class ScreenUtil { static ScreenUtil instance = ...
html5、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件，解决不同手机尺寸的手机适配问题
06-10
html5+app、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件，解决不同手机尺寸的手机适配问题
swift-Inch-优雅的iPhone不同尺寸屏幕精准适配工具
08-15
"swift-Inch-优雅的iPhone不同尺寸屏幕精准适配工具"是一个专为解决iPhone不同尺寸屏幕适配问题而设计的工具，其核心是Inch库，旨在帮助开发者更优雅地处理iOS设备的屏幕尺寸差异，确保应用在所有iPhone上都能呈现出...
移动端手机和平板适配解决方案
03-25
移动端手机和平板适配解决方案，已用于生产环境。
PC端和移动端适配样式fit.css
10-15
PC端和移动端适配样式fit.css
css兼容手机、平板、PC各种分辨率的网站
05-06
css兼容手机、平板、PC各种分辨率的网站,css兼容pc+平板+手机范例
css ipad 兼容
weixin_35751412的博客
12-23 424
iPad 和其他移动设备在解析和渲染 CSS 时有一些特定的差异。为了让你的网站在 iPad 上正常显示，你需要考虑以下几点： 缩放：iPad 默认情况下会对网站进行缩放，所以你需要在网站的根元素上添加 viewport 标签来控制缩放。 触摸事件：iPad 使用触摸事件来操作网站，所以你需要使用触摸事件相关的 CSS 属性来调整样式。 媒体查询：你可以使用媒体查询来为 iPad 特定的视口...
CSS3响应式布局中，如何适配不同屏幕和设备？
最新发布
derickForster的博客
04-18 903
然而，随着技术的不断发展和设备的不断更新换代，我们也需要不断学习和探索新的技术和方法，以适应不断变化的市场需求。在完成响应式布局的设计和实现后，我们需要对不同设备和屏幕尺寸进行充分的测试和调试，以确保页面能够正确地显示和交互。它通过使用媒体查询（Media Queries）和流式布局（Fluid Layouts）等技术，根据设备的屏幕尺寸、分辨率和方向等特性，自动调整页面布局、字体大小、图片尺寸等元素，以确保页面在不同设备上都能够良好地显示和交互。来自：www.yangzhie288.com。
html5+css3适配问题（手机、平板、PC）
热门推荐
HX_lei的博客
03-15 3万+
随着互联网的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出现在我们的视野里，身为专业的web前端人员，还不学习新技术你就out啦！为什么这样说呢？因为响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站，和现在相比是不是更加具有优势呢! 可能有些人对“什么是响应式布局”还不是很了解，下面就跟大家简单说下什么是响应式布局： 响应式
CSS @media - 手机和平板适配
Stavin Li的博客
02-09 1778
tip: 1.css默认手机样式，平板在此基础上修改数值； 2.以500px作为两者区分 1.手机css h3{ height: 4.96rem; padding-top: 1.51rem; font-size: 1rem; font-weight: 500; text-align: center; } 2.平板css 2.1竖屏 @media screen and (orientation: portrait) and (min-device-widt.
关于移动端布局不兼容ipad和ipad pro 解决方法
WEB木易
08-03 1万+
关于移动端布局不兼容ipad和ipad pro 解决方法 我用移动端布局使用的是淘宝的flex.js来兼容不同的手机屏幕，但是我发现他是不兼容ipad的。于是我通过百度找到了解决办法 /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&amp;&amp;(head=document.getElementsByT......
安卓apk适配不同尺寸
06-09
要使您的Android应用程序适应不同的屏幕尺寸，您需要考虑以下几个方面： 1. 使用dp作为单位：在您的应用程序中使用dp作为单位而不是px。dp是一种相对单位，它考虑了屏幕密度，并可确保应用程序在不同屏幕上显示相同的大小。 2. 提供多个布局：为不同的屏幕尺寸提供多个布局。您可以使用不同的布局文件来定义不同屏幕尺寸所需的布局。例如，您可以在res/layout文件夹中创建一个布局文件，并在res/layout-large文件夹中创建另一个布局文件，以适应大屏幕设备。 3. 使用可缩放的图形：使用可缩放的矢量图形而不是位图图像。矢量图形可以在不失真的情况下放大或缩小，而位图图像在放大时可能会失真。 4. 使用限制符：使用屏幕密度和屏幕尺寸的限制符来定义不同的资源。例如，您可以在res/drawable-hdpi文件夹中创建一个图像资源，以便在高密度屏幕上使用。 总之，通过使用上述技术，您可以确保您的Android应用程序适应不同的屏幕尺寸，并提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值