问题描述
我有一个非常简单的代码，可以在其旁边加上一些文本和图片(带有标题)，并且在计算机上可以很好地工作.但是，在电话上，它根本没有响应.我该如何解决?在较小的屏幕中，图像是在文本上方还是实际上在文本旁边都没有关系.
I have a very simple code to just have a bit of text and picture(with caption) beside it and it works well on the computer. However on the phone, it is not responsive at all. How can I fix that? It doesn't matter if the image is above or actually beside the text when in a smaller screen.
.about-image {
/*position: relative;
display: inline-block; /* Make the width of box same as image */
float: right;
z-index:1;
margin-top: 75px;
margin-bottom: 75px;
margin-right: 30px;
}
.about-image .overlay {
font-family: "Raleway", "";
/*
position: absolute;
*/
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 100%; /* Set the width of the positioned div */
height: 5%;
}
.overlay a {
text-decoration: none;
color: #fff;
font-family: "Raleway", "";
text-align: left;
}
.overlay a:hover {
color: #941313;
transition: linear .4s;
}
.further h1 {
color: black;
font-family: "Raleway", "";
font-weight: bold;
font-size: 40px;
padding-top: 75px;
padding-right: 10px;
padding-left: 70px;
}
.further h2 {
color: black;
font-family: "Raleway", "";
font-weight: bold;
font-size: 38px;
padding-right: 80px;
padding-left: 70px;
}
.further {
overflow: hidden;
}
@media screen and (max-width: 640px) {
.about-image {
justify-content: center;
display: inline-block;
}
.further h1 {
padding-top: 200px;
display: inline;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div class="about-image">
<img class="resist" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=376&q=80" width= "340px"
height= "480px"/>
<div class="overlay">
<a href="about.html">Caption</a>
</div>
</div>
<div class="further">
<h1>
Information written here</h1>
<h2> ⇨ More Information </h2>
<h2> ⇨ More Information</h2>
</div>
提前谢谢！
推荐答案
在使网站具有响应能力时，您可能会考虑其他事项和框架.
There are other things and frameworks you might consider when making websites responsive.
1:使用Flexbox
1: Use Flexbox
CSS3灵活框(或更广泛地称为Flexbox)是CSS3中一种新的强大的布局模式.它为我们提供了优化的用户界面布局盒模型.借助Flexbox，垂直居中，等高列，重新排序和更改方向变得轻而易举.
The CSS3 Flexible Box, or more widely known as Flexbox, is a new and powerful layout mode in CSS3. It provides us with a box model optimized for laying out user interfaces. With Flexbox, vertical centering, same-height columns, reordering and changing direction is a breeze.
资源: https://flexboxfroggy.com/
2:使用CSS网格
2: Use CSS-Grid
CSS Grid是CSS中功能最强大的布局系统.它为网络带来了二维布局工具，能够将项目放置在行和列中.网格在现代Web设计中的重要性很高，因此该新规范通过在浏览器中布置元素解决了许多古老的问题.
CSS Grid is the most powerful layout system available in CSS. It brings a two-dimensional layout tool to the web, with the ability to place items in rows and columns. The importance of grids in modern web design is high so this new spec solves a lot of age-old problems with laying out elements in-browser.
资源: https://flexboxfroggy.com/
3:使用媒体查询
3: Use Media Queries
媒体查询是CSS3中引入的一种CSS技术.
Media query is a CSS technique introduced in CSS3.
仅当满足特定条件时，它才使用@media规则包含CSS属性块.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
资源: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
4:使用Bootstrap
4: Use Bootstrap
Bootstrap是最流行的HTML，CSS和JavaScript框架，用于开发响应式，移动优先的网站.Bootstrap完全免费下载和使用！Bootstrap是一个框架，可帮助您更快，更轻松地设计网站.它包括用于排版，表单，按钮，表格，导航，模式，图像轮播等的基于HTML和CSS的设计模板....这是使用Bootstrap的一些其他原因:Bootstrap的自适应CSS可以适应手机，平板电脑和台式机.
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is completely free to download and use! Bootstrap is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. ... Here are some additional reasons to use Bootstrap: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.
5:使用基础
5: Use Foundtation
Foundation也被认为是杰出的前端框架之一.它是一个超响应框架，用于创建无缝设计，以创建网站，用于Web的应用程序以及移动和电子邮件模板.Foundation是最容易学习的框架，因此新用户可以轻松使用它.这个出色的框架具有许多组件，包括布局，导航，媒体，库容器等等.Foundation还提供了一系列出色的插件，可为开发人员提供扩展的选择范围，以便他们相应地选择一个插件.
Foundation is also counted among exceptional front-end frameworks. It is an ultra responsive framework that is used to create seamless designs to create websites, applications for the web and mobile and email templates. Foundation is the easiest framework to learn and thus it can easily be used by a new user. This exceptional framework has got a number of components including layouts, navigation, media, library containers and much more. Foundation has also got an exceptional list of plugins that offers extended choice to the developers to choose one accordingly.
提示: :制作网站时，请尝试使其首先移动.即首先使网站响应移动视图，然后再使其针对桌面.其背后的原因是，如果您首先使其移动，则在台式机上看起来也不错.但是，如果您首先设计台式机，那么在移动设备上效果会不佳.
Tip: When making a website, try to make it mobile first. i.e first make the website responsive for mobile views and then make it for desktop. The reason behind it is that if you make it mobile first, then it also looks good on desktop. But if you design desktop first, it won't look good on mobile.
希望有帮助
这篇关于图像和文本的响应式CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！