解决css文本媒体查询
[英]resolving css text media query
问题描述
I am trying to make my text -movies , tv shows , games responsive .
我正在努力使我的文字电影、电视节目、游戏具有响应性。 what should I do?我该怎么办？ I tried media query but I think I got it wrong.我试过媒体查询，但我认为我弄错了。
<!DOCTYPE html> <html> <head> <title>Papaya | Home</title> <link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <style type="text/css"> .bg { width: 100%; height: 110%; position: absolute; top: 0; left: 0; z-index: -4000; } body{ font-family: 'Luckiest Guy', cursive;} a:hover {color: red;} a { text-decoration: none; color:white; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:focus { text-decoration: none; } a:hover, a:active { text-decoration: none; } #one { position: fixed; top:180px; left:200px; } #two { position: fixed; top:180px; left:570px; } #three { position: fixed; top:180px; left:900px; } h1{font-size:70px} } </style> </head> <body > <div id="one"> <h1><a href="movies.html" style="text-decoration:none">MOVIES</a></h1></div> <div id="two"> <h1><a href="games.html" style="text-decoration:none">GAMES</a></h1></div> <div id="three"> <h1><a href="tvshows.html" style="text-decoration:none">TV SHOWS</a></h1></div> <div align="center"><img src="images/ball.jpg" class="bg" alt="LOADING.."></div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2016-04-17 04:46:10
First of all, write HTML and CSS n separate files.首先，编写 HTML 和 CSS n 个单独的文件。 It's considered best practice in web development ;) Then, the best way to add responsiveness to a website is to have Bootstrap installed.它被认为是 Web 开发中的最佳实践 ;) 然后，为网站添加响应能力的最佳方法是安装 Bootstrap。 Copy and past this to the head of your html document:将其复制并粘贴到 html 文档的头部：
This is a CDN (Content Delivery System) link.这是一个 CDN（内容交付系统）链接。 It will pull the bootstrap features from their website and allow you to add responsiveness to your site.它将从他们的网站中提取引导功能，并允许您为您的网站添加响应能力。
Here is the Bootstrap documentation link:这是 Bootstrap 文档链接：
http://getbootstrap.com/getting-started/ http://getbootstrap.com/getting-started/
My answer might seem a little long and complicated, but it's not.我的回答可能看起来有点长和复杂，但事实并非如此。 This is how professionals and companies make modern, responsive websites today!这就是当今专业人士和公司制作现代响应式网站的方式！ Hope this helps.希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.