媒体查询响应式常见的head里写的

最新推荐文章于 2024-07-02 11:33:04 发布
最新推荐文章于 2024-07-02 11:33:04 发布
阅读量114 收藏
点赞数
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61487366/article/details/121783100
版权

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>fayeMeta</title>
<!--适配移动端-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
<!--网页图标-->
<link rel="shortcut icon" type="image/x-icon" href="images/faye .ico" />
<!--重置全局样式-->
<link rel="stylesheet" href="css/reset.css">
<!--字体图标的样式-->
<link rel="stylesheet" href="css/iconfont.css">
<!--公共样式-->
<link rel="stylesheet" href="css/fayeMeta.css">
<!--移动端生效-->
<link rel="stylesheet" href="css/iphone.css" media="screen and (max-width:768px)" >
<!--ipad端生效-->
<link rel="stylesheet" href="css/ipad.css" media="screen and (max-width:992px) and (min-width:768px)">
<!--pc端生效-->
<link rel="stylesheet" href="css/pc.css" media="screen and (min-width:992px)">
</head>

faye是我随便起的，换成你自己的东西名称就可以了哦

坚持的faye413
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
响应式头部
Einstein8的博客
08-31 813
最近学习了响应式的导航，然后模仿了官网<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--提高ie浏览器的性能和渲染速度--> <meta http-equiv="X-UA-Compatible" content="IE=edge">
html中响应式查询,css 响应式（媒介查询）
weixin_30366015的博客
06-17 200
1.CSS 来实现响应式CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下：@media 类型 and (条件1) and (条件二){css样式}我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。html代码如下：响应式头部左部中部右部底部demo01.css样式如下：body{margin:0;text-...
HTML <meta>标签总结 H5 head meta属性管理 响应式布局
weixin_30888707的博客
07-03 401
来源:http://caibaojian.com <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 --> <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> <head> &l...
响应式 导航_检查响应式导航模式
Web design 教程小屋
07-06 255
随着网页设计师创建越来越多的响应式网站，我们处理全球导航的方式不断出现。 这是专注于如何开发其中一些模式的系列文章中的第一篇。 这篇文章将涵盖三种响应式导航模式； 顶部导航，优先级和选择菜单。 几乎每个响应站点都必须处理的具体问题之一是如何使用全局导航。 舒适地适合于宽屏的导航栏或菜单在小屏幕上容易变得局促。 由于世界各地的网页设计师进行了实验，因此出现了一系列解决方案来解决此问题。 ...
如何用一简单的CSS制作响应式HTML网页
hzp666的博客
12-12 2万+
如何用简单的CSS制作响应式HTML网页#故事前端开发在这篇文章中，我将教你如何使用CSS网格来创建一个超级酷的图像网格，它随着屏幕的宽度而改变列的数量。最赞的一点就是：这个响应式效果只需要添加一行CSS。这意味着我们不必给HTML取很乱的类名（即col-sm-4，col-md-8），或者为每一个屏幕大小创建媒体查询。现在让我们开始吧！设置对于本文，我们将继续使用我们在第一篇CSS Grid文章中...
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
01-18
媒体设备类型使用详解： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <meta name=viewport content=width=device-width,minimum...
在线黑色响应式全屏滚动主页html源码
02-16
响应式设计的核心是使用媒体查询（Media Queries）来根据设备的视口大小调整布局。CSS3中的媒体查询允许开发者定义不同断点，当屏幕尺寸达到这些断点时，应用相应的样式规则。这使得网页能够自适应各种屏幕尺寸，...
个人简历信息展示响应式网页模板
01-14
响应式设计通常利用媒体查询（media queries）来定义不同屏幕尺寸下的样式规则。例如，当屏幕宽度小于某个值时，可以改变元素的排列方式或隐藏某些元素，以适应小屏幕。 3. **JavaScript 动态效果**：JavaScript 是...
个人简历展示服务项目响应式网页模板
01-14
响应式网页设计基于CSS3的媒体查询，通过调整布局、图片大小和字体等元素，使得页面能够自动适应各种屏幕分辨率。在这个模板中，可能包括了多个预设的样式和布局，如全屏背景图片、网格系统、导航菜单、滚动效果、...
简要总结CSS编程中的响应式设计
09-24
总之，响应式设计是CSS编程中的一个重要概念，它通过`viewport`元标签和媒体查询等技术，实现了网页在不同设备上的自适应布局。掌握这一技术，不仅能够提升网站的用户体验，也是现代前端开发者必备的技能。
媒体查询小范例
narutozoro111的博客
11-20 435
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
响应式布局之媒体查询功能
哎
05-11 8055
实现响应式布局有很多方法： 媒体查询功能：Media Queries就是其中之一 media用来指定特定的媒体类型，例如屏幕（screen）和打印（print）和支持所有媒体介质的all 如果要在head部分引用，形式如下： 当然还可以在中引用： @media screen{ 选择器{ 属性：属性值； } } 通
bootstrap 响应式头部代码
林中明月间丶
05-20 1252
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/boot...
html+css网页开发 之 头部导航条（logo、导航栏、搜索框）
热门推荐
qq_43623147的博客
12-10 4万+
页面布局整体思路： 确定页面的版心（可视区），测量可知。 分析页面中的行模块，以及每个行模块中的列模块。 一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。 制作HTML结构。遵循先有结构，后有样式的原则。 头部制作 1号是版心盒子header 1200*42的盒子水平居中对齐 版心盒子内包含2号盒子logo 版心盒子内包含3号盒子nav导航栏 版心盒子内包含4号盒子search搜索框 版心盒子内包含5号盒子user个人信息 注意4个盒子都必须是浮动 style.c..
html5 响应式布局（媒体查询）
weixin_30698297的博客
09-10 280
响应式布局 响应式布局，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。 ...
css3 media媒体查询器用法总结
小迷童
01-15 2533
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 准备工作1：设置Meta标签
Media Queries详解
weixin_30376323的博客
04-13 266
Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： 1 <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> 2 <link href="css/style.css" rel="stylesheet" typ...
flex布局中子元素内容超出时，子元素本身出现滚动条实现方法
最新发布
Misnice的博客
07-02 264
flex布局中子元素宽度平均分配，并且当子元素内容超出时，子元素本身出现滚动条
媒体查询 响应式 练习
06-02
好的，您可以尝试以下练习： 1. 创建一个响应式布局，当屏幕宽度小于等于 768px 时，导航栏变为折叠式菜单。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>响应式布局练习</title> <style> /* 默认样式 */ ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; } a { display: block; padding: 10px; text-decoration: none; color: #333; } /* 媒体查询 */ @media screen and (max-width: 768px) { /* 折叠式菜单 */ ul { display: none; position: absolute; top: 50px; left: 0; width: 100%; background-color: #f9f9f9; z-index: 1; } li { display: block; text-align: center; margin-bottom: 5px; } a { border-bottom: 1px solid #ccc; } /* 显示折叠式菜单 */ .menu-toggle:checked ~ ul { display: block; } } </style> </head> <body> <input type="checkbox" id="menu-toggle" /> <label for="menu-toggle">菜单</label> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html> ``` 2. 创建一个响应式布局，当屏幕宽度小于等于 480px 时，图片和文字改为垂直排列。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>响应式布局练习</title> <style> /* 默认样式 */ .container { display: flex; justify-content: center; } .item { margin: 20px; text-align: center; } img { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; } h2 { margin-top: 10px; font-size: 24px; } p { margin-top: 5px; font-size: 16px; color: #999; } /* 媒体查询 */ @media screen and (max-width: 480px) { /* 垂直排列 */ .container { flex-direction: column; } h2 { font-size: 20px; } p { font-size: 14px; } } </style> </head> <body> <div class="container"> <div class="item"> <img src="https://picsum.photos/id/237/200/200" alt="图片" /> <h2>标题</h2> <p>描述</p> </div> <div class="item"> <img src="https://picsum.photos/id/238/200/200" alt="图片" /> <h2>标题</h2> <p>描述</p> </div> <div class="item"> <img src="https://picsum.photos/id/239/200/200" alt="图片" /> <h2>标题</h2> <p>描述</p> </div> </div> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值