CSS @media 媒体查询PC端

最新推荐文章于 2024-04-19 07:53:30 发布
最新推荐文章于 2024-04-19 07:53:30 发布
阅读量440 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/macangyewangs/article/details/110135798
版权 
@media (min-width: 1280px) {

} 
@media screen and(min-width: 1366px) {

}
@media screen and(min-width: 1440px) {

} 
@media screen and(min-width: 1680px) {

} 
@media screen and(min-width: 1920px) {

}
施玥喵
关注
专栏目录
CSS 利用@media screen判断识别手机/PC端浏览器
best_inh的专栏
01-07 1万+
一、写此篇的初衷： 手机用户常可以更换自己手机系统的字体，那么在浏览网页的时候，网页内容字体也都随之变了，于是我想，能不能让自己的网站的字体在手机浏览器中保持不变（使用一款自定义字体）呢；而在PC端浏览器不用处理。 二、功能实现依据： 首先，CSS @media查询中有判断横屏（orientation:landscape）、竖屏（orientation:portrait）的功能，那么分别在电脑、手机浏览器上是否有不同表现呢，如果有，就靠它了。先看如下代码： <style type="text
pc显示器分辨率 前端_@media 响应式PC端媒体查询屏幕分辨率尺寸总结
weixin_42500625的博客
02-28 1108
最近在写一个PC端的活动页面，想让页面适配不同的分辨率，既然提出了这样的需求，那么我们就要去尽量满足。因为之前一直写的是固定版心，然后在将容器居中，这样写的话，就导致页面在低分辨屏幕下会出现横向的滚动条，内容不能全部展示。所以本文章主要内容也就是向大家介绍css3属性 media响应式PC端媒体查询使用方法，以及对各主流电脑屏幕分辨率的尺寸进行总结，具有一定的参考价值，需要的朋友可以参考一下。CS...
CSS媒体查询（@media）全面解析
HeavenPeakMan的博客
08-02 3021
CSS媒体查询（@media）全面解析
媒体查询实现PC端移动端的动态适配
qq_42101569的博客
06-27 1468
提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用。
判断页面是移动端还是PC端打开的，判断访问设备的类型（媒体查询）
weixin_42091247的博客
07-26 1674
如何判断页面是由移动端还是PC端打开的 如何判断页面是由移动端还是PC端打开呢，也就是说怎么判断访问设备的类型呢？ 1.媒体查询，但是这个只能判断尺寸，并不能判断是不是移动设备。 2.通过user-agent值，来进行判断。使用javascript框架中的Navigator对象的userAgent属性。 复制代码 //判断是否是PC设备，true是，false不是 function IsPc(){ let userAgentInfo = navigator.userAgent; let Agents = [
CSS3 @Media 媒体查询
前端产品工程师
09-22 724
/*大型屏幕pc 超大屏*/ @media screen and (min-width:1200px){ #content { color: #f00; background: #000; } } /*1200>=pc>=992 大屏，字体红色，背景黑色*/ @media screen and (min-width:992...
css 媒体查询 移动端,媒体查询（pc端，移动端不同布局）
weixin_39649611的博客
08-03 3657
媒体查询语法：1.内联写法：and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background：red} //常规的样式}2.外联写法：当满足屏幕满足条件的时候连接href后的css文件媒体查询根据不同屏幕显示不同界面有两种方式：1.在不同的媒体查询判定的大括号后写不同的样式2.写两个相同的HTML内部的内容，通过媒体...
CSS媒体查询“@media”在调试中切换移动设备时不起作用。
m0_57927664的博客
04-30 2377
今天在学习CSS响应式网页设计中的媒体查询，遇到个有趣的问题，主要就是在调试过程中切换移动设备和电脑，同样的代码将有不同的结果。在切换移动设备调试时@media对于"max-width=979px"及以下的设置失去作用。（主要的疑问，在 max-width>=980px 的设置时，它是有作用的） 首先这段是我代码的关键语句。 <style> @media only screen and (max-width:979px){ body{ background-color:li
css中media的应用(手机端/PC端的自适应问题)
passion
11-22 1292
对于html自适应的解决 利用纯css解决 使用media属性去完成 本人只是简单使用,如若错误忘交流 注意: 此文只描述简单的screen, 其他可自行斟酌学习 HTML5添加meta 开发者利用meta属性为viewport 去控制适应设备的问题 ‘width=device-width’ 根据设备去适应宽度 ‘initial-scale=1’ 网页缩放级别(初始加载时候) 如果网页...
判断页面是在手机端还是在PC端打开的两种方法
weixin_61006919的博客
11-12 4960
UA(UserAgent)是指HTTP请求头中的一部分，用于标识客户端的一些信息，比如用户的设备类型、浏览器型号等等。因此，我们可以通过判断UA中的关键字来确定页面访问者的设备类型。媒体查询是CSS3的一个新特性，可以根据不同的媒体类型（比如设备屏幕的宽度、高度、方向等）来设置不同的CSS样式。需要注意的是，该方法并不100%准确，因为用户可以使用PC浏览器模拟手机UA，也有可能使用移动端浏览器访问PC网站。需要注意的是，该方法只能判断设备的屏幕宽度，不能确定设备的真实类型，因此并不太准确。
判断是否是pc或移动端
qq_39871330的博客
05-25 883
&lt;script type="text/javascript"&gt; var sUserAgent = navigator.userAgent.toLowerCase();     var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";     var bIsIphoneOs = sUserAgent.match(/iphone os/i) ...
CSS @media 媒体查询全解：打造极致跨平台页面的动态户体体验
JINGWHALE
04-19 1334
随着互联网设备的多样化和用户浏览习惯的变化，现代网页设计越来越注重提供跨平台、跨设备的无缝用户体验。CSS媒体查询@media在此背景下扮演着至关重要的角色，它赋予网页设计者精准控制网页样式的能力，使之能随设备环境变化而动态调整，从而打造出高度适应性和互动性的页面体验。本文将深入探讨如何运用@media媒体查询来创造流畅且响应迅速的动态页面。
判断网页打开的是移动端还是PC端
dui845819593的博客
07-27 3412
这是React的CSS媒体查询（Mediaqueries）hook。它监听与CSS媒体查询的匹配的内容。它允许根据查询的结果是否匹配来渲染组件。
h5使用@media适配pc和mobile
pureszgd的博客
10-29 1325
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 } ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
weixin_33968104的博客
06-20 1834
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像...
使用CSS的@media属性来写自适应样式，兼容PC端，平板端，手机端；
热门推荐
Mr_Bamboo1994的博客
05-16 1万+
这是我本人在写公司官网用到的@media属性来处理兼容手机端，垫端和PC端的样式; 首先要在HTML的头中写上以下几行代码： 然后在media.css里来为不同的屏幕写不同的样式： 这样就可以实现不同的屏幕适应不同的样式，实现自适应，希望能帮到你们;第一次写，很简单，如果有什么疑问或者错误的地方，大家可以艾特我，希望能和大家一起进步，谢谢！...
响应式
qq_41558265的博客
03-22 361
响应式网站的设计 一：什么是响应式网站？ 响应式网站设计是一种网页设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPa...
前端CSS @media 媒体查询PC端
MrHao_的博客
08-14 2139
前端CSS @media 媒体查询PC端 注意and后面跟一个空格 @media screen and (min-width: 1024px){ body{font-size: 12px} } /*>=1024的设备屏幕*/ @media screen and (min-width: 1100px) { body{font-size: 14px} } /*>=1100的设备屏幕*/ @media (min-width: 1280px) { body{font-size: 18px;} } /
vue媒体查询适配pc端
最新发布
09-15
Vue中的媒体查询（Media Queries）类似于CSS中的媒体查询，用于创建响应式设计，能够根据不同的屏幕尺寸或设备特征来调整页面的布局和样式。在PC端进行媒体查询适配，通常意味着你需要设置一个或多个断点（breakpoints），根据用户的屏幕宽度应用不同的样式规则。以下是一个基本的步骤指南： 1. 设置媒体查询断点：首先你需要确定哪些屏幕宽度是你需要特别适配的。在PC端，这个范围通常很大，因此你可能只需要为超宽屏或者特定布局调整设置断点。 2. 使用`<style>`标签或单文件组件中的`<style>`部分来定义媒体查询。你可以在全局样式文件中设置它们，也可以在组件的`<style>`部分中设置特定于组件的媒体查询。 3. 应用媒体查询样式：在媒体查询内部，你可以定义任何CSS规则。当屏幕尺寸满足断点条件时，这些规则会被应用。 示例代码： ```css /* 全局样式文件或者组件的 <style> 部分 */ /* 基本的PC布局 */ body { /* 默认样式 */ } /* 当屏幕宽度达到1440px时应用的样式 */ @media (min-width: 1440px) { body { /* 超宽屏的特定样式 */ } } /* 当屏幕宽度在992px到1199px之间时应用的样式 */ @media (min-width: 992px) and (max-width: 1199px) { body { /* 大屏PC的特定样式 */ } } /* 更多断点可以根据需要添加 */ ``` 4. 利用Vue组件和生命周期钩子，在不同断点下动态切换类名或者直接修改样式。 在Vue中实现媒体查询适配PC端需要注意的是，由于PC端屏幕尺寸范围宽广，可能不需要像移动端那样密集地设置多个断点，更多的是考虑布局的弹性与可读性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值