问题
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>
Thanks in advance!
回答1:
There are other things and frameworks you might consider when making websites responsive.
1: Use 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.
Resource: https://flexboxfroggy.com/
2: Use CSS-Grid
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.
Resource: https://flexboxfroggy.com/
3: Use Media Queries
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Resource: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
4: Use Bootstrap
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.
Resource: https://getbootstrap.com/
5: Use Foundtation
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.
Resource: https://get.foundation/
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.
Hope it helps
回答2:
intro
I see people frequently suggest using well known frameworks or libraries to create a responsive design in favor of Vanilla CSS. For your problem I would say, just use the default 'CSS columns' mechanism MDN: columns. No need to include heavy duty code for the layout and responsiveness you want.
rule
In your layout 'CSS columns' will need only one (the shorthand property) or two CSS rules:
columns, the shorthand property for below two propertiescolumn-count: 2either set inbody, or (like I did) in a generic.wrapper. Effect: grow/shrink content to fit 2 (maximum allowable) columns in the available space.column-width: 320pxacts as a 'breakpoint': minimum width of a column. 320px is the width of smallest mobile device (assuming 'portrait' layout) minus some left/right spacing. Do not use20remas in this casecolumn-widthis device dependend and not viewport, parent space or font size dependend. Effect: when the content doesn't fit (the devices' width), it will wrap to the next line and stretches to fill available space..wrapper { /* either */ columns: 320px 2; /* shorthand property */ /* or */ column-count: 2; /* grow/shrink content to fit 2 (maximum allowable) columns */ column-width: 320px;/* but a single column has to fit 320px, otherwise wrap it to the next line */ }
This will be 'the base rule' or the main mechanism for your page.
[OPTIONAL] second (or third) rule you can use is intended for all the direct child elements of body (or .wrapper):
break-inside: avoid, (MDN: break-inside) which will (try to) avoid breaking content of child elements over two columns.
I used this as
.wrapper>* { break-inside: avoid }/* avoid orphaned content (no splitting over columns) */
exceptions
Now you need to 'anticipate on exceptions' to the base rule, actually decide on two different situations:
- the layout on a small device (mobile, statcounter), which we already did by assigning
column-width: 320px. Most commonly used mobiles have resolution 360x640, socolumn-width: 360pxwould work too, but I like to have some left/right space available for users to put their fingers on while holding the device. - the layout on a large device (laptop/desktop, statcounter). Probably mostly deciding on sizes, positioning and spacing of the content.
why not flexbox?
Personally I think diving into CSS 'Flexbox Layout' is a lot of fun and, in general, makes solving layout issues a piece of cake, however, it requires much reading, trial and error. But even FBL seems overdone for your problem.
the code
The code in the snippet is heavily commented for your convenience and is split into four distinct sections:
- Preferred globals, CSS rules I always use in my pages
- SO62389047 specific code showing the mechanism
- Extra, showing how to use a linear equation 'y=mx+b' to create responsive main page spacing
- Theming, just this and thats to make things look nice (read 'eye-candy')
just remember
Simplify, simplify and simplify some more (k.i.s.s.s., 'keep it super simple, stupid'), design the rule, anticipate exceptions.
the snippet
/**************************/
/* some preferred globals */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, * { box-sizing: inherit }
/*
'box-sizing: border-box' is the generally accepted (new) default for the box-model.
'border-box' : total-width = element-width + paddingLR + borderLR
total-height = element-height + paddingTB + borderTB
'content-box': total-width = element-width
total-height = element-height
MDN box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
*/
body { margin: 0 } /* remove default HTML spacing */
p { margin: 0; padding-bottom: 1em } /* ditto, use padding instead */
a { text-decoration: none; color: currentColor; opacity: 0.8 }
img { /* my default preferred image behaviour */
display: block; /* removes extra space below image (default 'inline-block') */
width: 100%; /* stretch to fit width of parent (or column!) */
object-fit: cover; /* but clip when differs from parent ratio */
}
/****************************/
/* SO62389047 specific code */
/****************************/
/*
Use of a generic wrapper around all the page content makes it easier
to position the content and apply page spacing. Preferably do not modify
<html> and <body> (too much, anyway).
*/
.wrapper {
column-count: 2; /* grow/shrink content to fit 2 columns */
column-width: 320px;/* but a single column has to fit 320px, otherwise
wrap it to the next line */
}
.wrapper>* {
break-inside: avoid;/* avoid orphaned content (no splitting over columns) */
}
.about-image {
position: relative; /* creates a new 'stacking context' (for .overlay) */
}
.about-image .overlay {
position: absolute; /* position within parent (.about-image) */
z-index : 1; /* [OPTIONAL] on top of image */
bottom: 0; /* attach to bottom of parent */
left: 0; right: 0; /* full parent width */
}
.about-image>img {
max-height: 90vh; /* keeps it in full view */
/* full page height (100vh) minus page T/B padding (2 * 5vh) */
}
.further h1 {
font-size: 2vmax; /* make font-size maximum viewport W/H dependend (will keep it large) */
}
.further h2 {
font-size: 1.7vmax; /* ditto */
}
/***********************************************/
/* Extra: using math for responsive page space */
/***********************************************/
.page-spacing {/* arbitrary T/B padding, linear equation for L/R padding */
padding: 5vh calc(19.5vw - 54.4px); /* Y-intercept form */
padding: 5vh calc(8px + (320 - 8) / (1920 - 320) * (100vw - 320px)); /* point slope form */
/*
Use either version, but consider using the first as it is less CPU intensive,
especially important when using many CSS calcs (page can become 'sluggish' on scroll).
*/
/*
THE MATH, 'equation for a straight line'
Calculate L/R padding with linear equation 'y=mx+b'
using points p1(320,8) p2(1920,320) => y=0.195x + 54.4
this means, use L/R padding of:
- 8px on a device with display width 320px
- 320px on a device with display width 1920px
The equation will calculate all other values inbetween. Neat, right?
1) formula: y = m * x + b, the 'Y-intercept form'
where: m = (y2 - y1) / (x2 - x1)
x = always 100vh/vw/vmin/vmax depending on the
viewport W/H dependency of the required end result 'y'.
b = y1 - m * x1 (full: b = y1 - (y2 - y1) / (x2 - x1) * x1 )
p1 = (x1,y1)
p2 = (x2,y2)
2) CSS: calc(0.195 * 100vw + 54.4px)
3) simplify the CSS: calc(19.5vw + 54.4px)
(actually: multiply m by 100 and remove '* 100')
4) Alternatively you can use the 'point slope form' in calc()
equation: y = y1 + (y2 - y1) / (x2 - x1) * (x - x1)
CSS: calc(8px + (320 - 8) / (1920 - 320) * (100vw - 320px))
use of 'px' unit here twice is [MANDATORY] as the calc() will fail otherwise
NOTE
If you want the end result to depend on browser font size settings set by the user
then divide the end result 'y' by 16 and multiply by 1rem
(or multiply by 0.0625rem, which is the same).
math reference: https://www.mathsisfun.com/equation_of_line.html
*/
}
/************************/
/* only eye-candy below */
/************************/
.about-image .overlay {
padding: 0 1rem; /* arbitrary left/right spacing */
line-height: 2rem; /* will make 'overlay' 2rem high, also centers text vertically */
background-color: rgba(0,0,0,.3);
}
.overlay a {
text-decoration: none;
color: #fff;
font-family: "Raleway", "";
}
.overlay a:hover {
color: #941313;
transition: linear .4s;
}
.further {
font-family: "Raleway", sans-serif;
}
/* (put in <body>) for easy debugging: show all elements with outlines */
[outlines="1"] * { outline: 1px dashed }<body class="page-spacing" outlines="0">
<section class="wrapper">
<div class="further">
<h1>Information written here</h1>
<h2>⇨ More Information</h2>
<h2>⇨ More Information</h2>
</div>
<div class="about-image">
<img class="resist"
src="https://via.placeholder.com/340x480?text=SO62389047"/>
<div class="overlay">
<a rel="noopener" target="_blank" href="about.html">Caption</a>
</div>
</div>
</section>
</body>来源：https://stackoverflow.com/questions/62389047/reponsive-css-for-image-and-text