xxxxxxxxxx
- Website fits the device that is used to access it
- Multiple pixels are combined into one logical pixel for specified device
- 3 techniques:
1. Flexible grids : in percentage values
- column : screen split into multiple vertical portions
- gutter : space between columns
- margins : left and right edge of screen
2. Fluid images:
- set maximum or minimum CSS property of image with percentage
- eg : `max-width : 100%`
- It will scale down if the grid become smaller, but it will never be overflown
3. Media queries :
- Allows developer to query display size, orientation and aspect ratio
- CSS rule
- example : `@media only screen and (max-width: 700px){...}`
- Breakpoint :
- pixel value specified for different size of devices.
- eg: Bootstrap breakpoints: extra small, large, extra large etc.
- function around 3 grids
1. Fixed grid : column widths are fixed, margin is flexible (Remaining space is occupied by margin)
2. Fluid grid : column widths can grow or shrink to adapt, gutter is fixed
3. Hybrid grid: Columns have both fluid width and fixed width components
xxxxxxxxxx
/* Answer to: "what is responsive design" */
/*
Responsive web design is an approach to web design that makes
web pages render well on a variety of devices and window or screen
sizes. Recent work also considers the viewer proximity as part of
the viewing context as an extension for RWD.
In other words, it makes your website look nice on all devices.
To learn Responsive Web Design head over to W3Schools tutorial:
https://www.w3schools.com/css/css_rwd_intro.asp
*/
xxxxxxxxxx
Responsive website, specify width
.container{
max-width:960px;
width:100%;
margin:0 auto;
}
xxxxxxxxxx
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
xxxxxxxxxx
<div className="overflow-x-auto max-w-full">
<table className="w-full whitespace-no-wrap divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
{xlsxData[0].map((header, index) => (
<th
key={index}
className="border border-gray-400 px-3 py-2 text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl"
>
{header}
</th>
))}
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{xlsxData.slice(1).map((row, rowIndex) => (
<tr key={rowIndex}>
{row.map((cell, cellIndex) => (
<td
key={cellIndex}
className="border border-gray-400 px-3 py-2 text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl"
>
<input
type="text"
defaultValue={cell}
onChange={(e) => handleInputChange(e.target.value, rowIndex, cellIndex)}
className="w-full bg-transparent focus:outline-none"
/>
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
xxxxxxxxxx
pip config set global.trusted-host "pypi.org files.pythonhosted.org pypi.python.org"