Purchase price:3000Yen
Rating:
This article can be read in about 2 minute 10 seconds
"WEB design online lesson (12-week course)Read as a teaching material for students who are taking the course.
This is a very educational book for the teaching side.HTML / CSS is often seen lightly, but it evolves and changes unknowingly, and I find it much more difficult than it used to be.
Change the font size of catch phrase h1 according to the screen width.At this time, instead of using the method of switching with media queries, use the clamp () function to change from 48 pixels to 68 pixels.Here, the font size is specified as 5vw to make it variable, the minimum value is specified as 48 pixels, and the maximum value is specified as 68 pixels. Since 5vw has 960 pixels at a screen width of 48px and 1360 pixels at a screen width of 68px, the font size of the catch phrase changes as follows.
.hero h1 {
margin-bottom: 42px;
font-family: ”Montserrat”, sans-serif; font-size: clamp (48px, 5vw, 68px); min-height: 0vw;
font-weight: 400;
line-height: 1.3;
text-align: center;
}
* Min-height is described to make the font size specified by clamp () work in Safari.
The font size of 48 to 68 pixels can be changed smoothly over the screen width of 375 to 1366px.The font size for that can be calculated by the linear function formula "y = ax + b".First, find a and b.
a Slope = (increase in y) ÷ (increase in x) = (68-48) ÷ (1366-375) = 0.0201816
b = y – ax = 48 – 0.0201816 X375 = 48-7.5681 = 40.4319
This will give you the font size y at the current screen width "X = 100vw".
y = ax + b = 0.0201816 X 100vw + 40.4319pX = 2.01816vw + 40. 4319px
* You can also calculate with an online tool.
Font-size clamp () generator (https://clamp.font-size.app/)
Fluid-responsive font-size calculator (Fluid-responsive font-size calculator (https://websemantics.uk/tools/responsive-font-calculator/)
Preventing extra margins under the image img The extra margins under the image are due to the fact that img is treated as an inline block box by default.Here, display is specified as "block", and a block box is specified to form a block box to prevent margins from being inserted.Furthermore, this specification is applied to all imgs as a basic setting.