媒体查询——>@media screen and (min-width: 768px)

最新推荐文章于 2024-06-01 09:39:57 发布
最新推荐文章于 2024-06-01 09:39:57 发布
阅读量1w 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39579242/article/details/82145124
版权

响应式网页设计的时候，往往都需要运用到CSS3的媒体查询技术，实现在大PC端，普通PC端、平板端、移动端呈现不同的样式

参考数据标准：

当屏幕宽度>1200px（超大PC显示器-lg）：    容器宽1170px

当屏幕宽度>992px（普通PC显示器-md）:    容器宽970px

当屏幕宽度>768px（平板显示器-sm）:        容器宽750px

当屏幕宽度<768px（手机显示器-xs）:         容器宽auto

小案例：PC端的样式

移动端的样式

最低0.47元/天 解锁文章
公有云私有云
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html media设置自适应屏幕用法,css使用@media响应式适配各种屏幕的方法示例
weixin_33375038的博客
06-16 6168
定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。PC端设备屏幕的宽度页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际...
mobile-media-queries:不同手机和桌子CSS媒体查询
05-24
媒体查询的基本语法是`@media <media-type> and (media-feature) {css-rules}`，其中`<media-type>`可能是`screen`、`print`等，`media-feature`则包括`width`、`height`、`aspect-ratio`等，用来描述设备的特性。...
bootstrap的@media (min-width: 768px)
lzf的博客
06-28 1万+
在bootstrap.css中，经常出现 @media (min-width: ...px) 样式名{ ..... } 这表示只有浏览器的屏幕宽度达到min-width时，下面的样式才会执行。 比如导航栏的navbar-left、navbar-right @media (min-width: 768px) .navbar-left {
@media使用方法
最新发布
qq505751223的博客
06-01 368
media是 CSS3 中的一个重要特性，它允许我们根据设备的特性（如设备的宽度、高度、方向、分辨率等）来应用不同的样式规则。下面是@media。
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
热门推荐
叶兴胜
10-10 2万+
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法 原文   http://blog.qiji.tech/archives/10167 主题 CSS 前言 现在 HTML5/CSS3 很流行罢，也是未来时代的趋势。在 HTML5 带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢。 动画 ani
使用媒体查询实现移动端适配，媒体查询meta标签配置（@media screen and，min-width和max-width）
weixin_65793170的博客
04-26 4443
媒体查询可以帮助开发人员针对不同的设备创建响应式设计，它可以使网站或应用程序自适应不同的屏幕尺寸和分辨率，以确保在所有设备上具有良好的用户体验，还可以通过将媒体查询与其他技术（如弹性网格布局和响应式图像）结合使用，创建功能强大的适配方案
响应式布局 @media screen and (min-width: 960px)
weixin_30483495的博客
07-13 684
@media screen and (min-width: 960px){ .heading, .container, .footing{ width: 960px; } .left, .main, .right{ float: left; height: 500px; } .left, ...
运用@media实现网页自适应中的几个关键分辨率
weixin_33843409的博客
01-31 457
经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？ 先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是 768、992、1200。当然了过去也有 些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为...
media-queries-exercise：配对的媒体查询练习存储库
02-20
@media screen and (min-width: 481px) and (max-width: 1024px) { /* 平板样式 */ } /* 桌面 */ @media screen and (min-width: 1025px) { /* 桌面样式 */ } ``` **实际应用** 在实际项目中，媒体查询常用于：...
media-queries-devices:用于媒体查询的片段CSS
05-09
#Iphone 4和4S /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-...
Simple-Media-Query:简单媒体查询
03-17
媒体查询（Media Queries）是现代Web开发中的一个关键特性，特别是在响应式网页设计中，它允许我们根据设备的特定特征，如视口宽度、设备像素比等，来改变页面的布局和样式。"Simple-Media-Query"项目显然是对这一...
sort-media-queries:对媒体查询进行排序
07-01
排序媒体查询 对媒体查询进行排序。 安装 npm install sort-media-queries --save 应用程序接口 smq(list, [propertyName]) ...smq ( [ "screen and (min-width:1278px)" , "screen and (min-width:100px)" ,
min-width 和 @media screen
weixin_30845171的博客
11-28 134
min-width可以容器设置最小宽度,低于改宽度时，会自动加上滚动条,支持ie7及ie7+； @media only screen and (min-width: /*最小宽度(要加单位px)*/) {　　/*里面设置样式*/}(只支持ie8+) 两者可以混合在一起用,但是因为@media screen不支持ie9以下，所以使用时应考虑项目对浏览器支持的要求。 转载于:https://...
Bootstrap中CSS媒体查询分辨率 @media（min-width）例子
阿酷tony
10-26 446
Bootstrap中CSS媒体查询分辨率 @media（min-width）例子
css3 media媒体查询器用法总结
小迷童
01-15 2533
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 准备工作1：设置Meta标签
CSS---媒体查询（@media 查询）
weixin_44691220的博客
10-09 1161
作为一名前端工程师，我们在工作中就是和不同的网页打交道，那么经常遇到的问题就是网页兼容性问题（自适应问题）。不仅是PC端和移动端之间的兼容问题，还有各自网页在不同分辨率下的自适应问题，造成了前端工作者非常大的苦恼。当然，有问题肯定就有解决方法，今天，我们主要分享其中一种便于入手的，即媒体查询。 媒体查询：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@m...
@media 各大尺寸
xiaozhen0610的博客
07-13 1111
@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } @media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}s..
@media screen解决移动web开发的多分辨率问题
2012013977的博客
09-07 1万+
@media screen解决移动web开发的多分辨率问题
[转]css3 media媒体查询器用法总结
前端向朔
08-07 2116
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。准备工作1：设置Meta标签首先我们在使用Media的时
@media screen and (min-width: 1000px) 什么意思
06-10
@media是CSS中的一个规则，用于指定在不同的媒体设备和不同的屏幕尺寸下应用不同的样式。其中，screen表示样式仅适用于屏幕媒体，而(min-width: 1000px)则表示当屏幕宽度不小于1000像素时，应用该样式。 换句话说，以上这行CSS代码表示只有当屏幕宽度不小于1000像素时，才会应用该规则中定义的样式。这在响应式设计中非常常见，因为我们需要根据不同的屏幕尺寸来适配不同的布局和样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值