使用CSS的@media属性来写自适应样式，兼容PC端，平板端，手机端；

最新推荐文章于 2024-06-01 09:39:57 发布
置顶 最新推荐文章于 2024-06-01 09:39:57 发布
阅读量1.3w 收藏 26
点赞数 8
分类专栏： 前端 文章标签： 前端 响应式 自适应 @media属性 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Bamboo1994/article/details/80339731
版权

这是我本人在写公司官网用到的@media属性来处理兼容手机端，垫端和PC端的样式;

首先要在HTML的头中写上以下几行代码：

然后在media.css里来为不同的屏幕写不同的样式：

这样就可以实现不同的屏幕适应不同的样式，实现自适应，希望能帮到你们;第一次写，很简单，如果有什么疑问或者错误的地方，大家可以艾特我，希望能和大家一起进步，谢谢！

Mr_Bamboo1994
关注
  • 8
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
h5使用@media适配pc和mobile
pureszgd的博客
10-29 1300
h5使用@media适配pc和mobile // 设置最小尺寸是 700 像素的样式 @media screen and (min-width: 700px) { // css } // 设置最小尺寸是 700 像素，最大尺寸是 900像素 @media screen and (min-width: 700px) and (max-width: 900px) { // css } ...
html兼容PC和手机端
10-28 1931
前言：之前有些人说手机端打开vip网页会出现错位等现象，然后现在做了一个两个页面的，一个是PC端，一个是Wap端。内容虽少。 技术： 1、js判断PC端还是手机端function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone",
@media使用方法
最新发布
qq505751223的博客
06-01 379
media是 CSS3 中的一个重要特性，它允许我们根据设备的特性（如设备的宽度、高度、方向、分辨率等）来应用不同的样式规则。下面是@media。
html5+css3适配问题（手机、平板、PC）
热门推荐
HX_lei的博客
03-15 3万+
随着互联网的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出现在我们的视野里，身为专业的web前端人员，还不学习新技术你就out啦！为什么这样说呢？因为响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站，和现在相比是不是更加具有优势呢! 可能有些人对“什么是响应式布局”还不是很了解，下面就跟大家简单说下什么是响应式布局： 响应式
css中media的应用(手机端/PC端的自适应问题)
passion
11-22 1241
对于html自适应的解决 利用纯css解决 使用media属性去完成 本人只是简单使用,如若错误忘交流 注意: 此文只描述简单的screen, 其他可自行斟酌学习 HTML5添加meta 开发者利用meta属性为viewport 去控制适应设备的问题 ‘width=device-width’ 根据设备去适应宽度 ‘initial-scale=1’ 网页缩放级别(初始加载时候) 如果网页...
【css】响应式布局 @media媒介 适配平板手机
OG
01-21 560
// 大型设备（大台式电脑，1200px 起） @media screen and (min-width:1200px) { //... } // 中型设备（台式电脑，992px 起） @media screen and (min-width:992px) and (max-width:1200px) { //... } // 小型设备（平板电脑，768px 起） @media screen and (min-width:768px) and (max-width:992px) { //.
使用@media screen实现网页布局的自适应（手机端，pc，平板自适应）
weixin_42281924的博客
08-18 4814
适用场景 在一些场景下flex布局也不一定全部适用（手机，pc，平板），因而用到了这种方式，针对不同设备进行不同的样式选择，提升用户体验。 创建html文件 使用vs code编辑器，快捷键（!+tab）创建一个html模板 其他编辑器也可把这一段代码复制过去 <!DOCTYPE html> <html lang="en"> <head> <me...
页面自适应案例，适配pc端和移动端
11-15
在网页设计领域，"页面自适应"是一种关键的技术，它使得网页能够根据用户使用的设备——无论是PC、平板还是智能手机——自动调整布局、尺寸和功能，提供良好的浏览体验。本案例聚焦于实现这样的自适应设计，确保在...
自适应PC手机端的jQuery可编辑表格代码
06-10
在"自适应PC手机端"的上下文中，这意味着该jQuery表格代码设计时考虑到了不同设备的兼容性。自适应布局（Responsive Design）是现代网页设计的关键，确保网页在不同屏幕尺寸，如桌面、平板电脑和手机上都能呈现出...
兼容pc端、手机端、ipad全屏显示
07-27
总的来说，实现"兼容pc端、手机端、ipad全屏显示"需要深入理解响应式设计原理，熟练运用CSS3媒体查询，以及对不同浏览器和设备的兼容性有深刻认识。只有这样，才能创造出无论在哪种设备上都能提供优质体验的网页。
响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架
07-19
在“响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架”这个主题中，我们将深入探讨响应式布局的概念、其重要性，以及使用CSS框架实现响应式设计的方法。 响应式布局的核心概念是“流体布局”，...
移动端手机和平板适配解决方案
03-25
移动端手机和平板适配解决方案，已用于生产环境。
PC手机端通用的jQuery响应式幻灯片轮播特效
06-09
响应式设计是现代网页开发中的一个重要概念，它允许网页在不同设备上自适应显示，无论是桌面电脑、平板还是智能手机。jQuery作为一款强大的JavaScript库，极大地简化了DOM操作，动画效果和事件处理，使得创建响应式...
html/css兼容pc端和移动端，根据不同设备的宽度展示不同的样式，实现响应式布局（@media的使用）
向宇
08-19 1209
什么是响应式布局 实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 响应式设计的步骤 (1)Meta标签定义 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&...
如何使用css3实现样式适配pc、平板和手机端，并让样式随着屏幕大小的变化而变化呢？
qq_31676725的博客
12-23 3670
许多小哥哥小姐姐在写前端的时候特别懊恼，在我的电脑上样式明明很漂亮，但是稍微换个小屏幕电脑或者手机端查看，惨不忍睹。怎么解决呢？ 好了，在看代码之前，让我们先来理理思路，理清了思路，实现起来就不难了。 我们来定义样式，在宽度大于1200px的时候是什么a样式，在屏幕小于750px时是b样式，在屏幕小于414时（一般等于或小于414就是手机端了）是c样式，到这来有的童鞋说: 那我这不是很麻烦，要写...
html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
weixin_39955149的博客
06-02 729
前言现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好响应式布局。index响应式布局头部左侧中间右侧底部CSS*{margin: 0;padding: 0;}/*适应PC端 宽度大于1000px*/@media screen and (min-width: 1000px...
css 移动端适配方案
青蛙king的博客
11-16 344
一、什么是移动端适配？ 常见的移动端指的是手机、平板等。由于这些设备的屏幕大小不一样，所以做移动端的页面时需要考虑在 安卓 / IOS 的各种尺寸设备上的兼容，最终实现：在不同尺寸的手机设备上，页面自适应，并保持统一的效果。 二、单位的理解与换算 px、%、em、rem、vw、vh、vm 的学习，请戳这里：https://mp.csdn.net/editor/html/107486739 三、常见的移动端适配方案有 viewport（scale=1/dpr） rem——等比缩放布局 ..
css媒体查询适配iphoneX,iPhone5，HUAWEI P40，ipad
yinyueyu007的博客
06-02 977
/* 1.max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。 2.max-width是目标显示区域的宽度，例如，浏览器宽度。 3.它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素 */ /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-
使用css的 transform 属性让pc布局兼容平板，代码怎么实现？
07-12
要使用CSS的transform属性来实现PC布局兼容平板，你可以通过以下代码实现： ```css @media screen and (max-width: 768px) { .pc-layout { transform: scale(0.8); /* 调整缩放比例适应平板布局 */ transform-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值