responsive-design

问题 My website hosts a lot of images of all sizes. These images are responsive and change size at all browser widths from desktop to mobile. I see in my Google Search Console that I have a poor CLS (cumulative layout shift) of .25s. The layout of my website shifts as the images load. Since my images are responsive, I can't specify exact sizes of the images, or have placeholders to reserve the space. What is a modern way to prevent CLS with responsive images? Layout here: https://jsfiddle.net

问题 I have a small task where it requires the two buttons side by side when using a desktop, and then when on mobile they are stacked on top of each other but have not decreased in size. I have managed to make them stack on top of each other but they are different sizes? Whenever I defined the % size of the buttons it makes them squish together and look hideous when in device view. .button { background-color: #f2f2f2;; border: none; color: #737373; padding: 15px 32px; text-align: center; text

问题 I am currently working on a project dealing with responsive design, and the whole layout should be achieved using HTML and CSS. I know its possible to move content from one column layout to another, without duplicating content, using java script but is the same achievable using HTML and CSS? Take for example the following which would render like this on the desktop design --page------------------- | -------- -------- | | |div 1 | | div 2| | | -------- -------- | ------------------------- But

问题 Hey there I am new to CSS grid. Have a look at the following example: .platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 20px; } .item { width:100%; background-color:#aaa; padding:10px; box-sizing:border-box; text-align:center; } .wrapmed { max-width:400px; } .wrapsmall { max-width:300px; } <div class="platform"> <div class="item">a</div> <div class="item">b</div> <div class="item">c</div> <div class="item">d</div> </div> <br/><br/> <div class=

问题 How to make an iframe responsive, without assuming an aspect ratio? For example, the content may have any width or height, which is unknown before rendering. Note, you can use Javascript. Example: <div id="iframe-container"> <iframe/> </div> Size this iframe-container so that contents of it barely fit inside without extra space, in other words, there is enough space for content so it can be shown without scrolling, but no excess space. Container wraps the iframe perfectly. This shows how to

问题 I am building a responsive portfolio website with a grid of thumbnails. It goes from a one-column grid up to a three-column grid depending on the browser width. The problem occurs only in the three-column grid. When I resize the browser, sometimes the grid just skips two thumbnails and leaves an empty space. The thumbnails are pushed further in the grid like this: Now, this only happens sometimes. When I'm resizing the browser I can see it switching from the normal grid to the error grid and

问题 I am building a responsive portfolio website with a grid of thumbnails. It goes from a one-column grid up to a three-column grid depending on the browser width. The problem occurs only in the three-column grid. When I resize the browser, sometimes the grid just skips two thumbnails and leaves an empty space. The thumbnails are pushed further in the grid like this: Now, this only happens sometimes. When I'm resizing the browser I can see it switching from the normal grid to the error grid and

问题 The website is designed to have 6 big squares, 3 per row, in a grid layout. I am trying to make it responsive, so if someone zooms the website would adapt... and it kind of does, but in a bad way. I want the squares to lay different when zooming; If now they are 3 per row I want them to go 2 per row and finally 1 per row if zooming enough. Instead of that the squares narrow themselves in their width in order to fit. /*///////////GENERAL//////////*/ * { margin: 0px; padding: 0px; box-sizing:

问题 I have a webpage that I have set to have a landscape orientation on mobile devices within which I have placed an iframe. My problem is I cant get the iframe to fit within the mobile device screen while in landscape orientation (full width and height matching the device screen). How may I be able to achieve this? I am using CSS: <style> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #content { position:absolute; left: 0; right: 0; bottom: 0; top: 0 } #content iframe{

问题 I am working with DataTables which is having paging enabled and shows 'next/previous' buttons with page-numbers(1,2,3,4,5,...,10). I am trying to change this to only 'next/previous' in smaller devices (less than 768px) using pagingType option provided by plugin. I have tried using responsive method but its not working: responsive: { pagingType: "simple" } I can have solution using following css but I want not to generate those buttons inside DOM .dataTables_paginate ul.pagination .paginate