Tạo giao diện thiết bị (Smartphone, Tablet, Laptop) với CSS

Có thể vẽ khung hình các thiết bị (mobile, tablet, laptop) chỉ bằng CSS để demo responsive hoặc showcase portfolio.

Ví dụ: Smartphone (Mã gốc)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .mobileDevice {
    position: relative;
    width: 360px;
    height: 400px;
    margin: auto;
    border: 16px rgb(7, 80, 35) solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
  }
  .mobileDevice:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
    border: 2px solid rgb(200, 255, 0);
  }
  .mobileDevice .screen {
    width: 360px;
    height: 400px;
    background: white;
  }
</style>
</head>
<body>
<h1 style="text-align: center;">Device look example</h1>
<div class="mobileDevice">
  <div class="screen">
    <iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%"></iframe>
  </div>
</div>
</body>
</html>

Mở rộng: Tablet và Laptop

/* Tablet */
.tabletDevice {
  width: 768px;
  height: 1024px;
  border: 20px solid #333;
  border-radius: 20px;
  margin: 50px auto;
}
.tabletDevice::after { /* Home button */
  width: 40px; height: 5px; bottom: -35px; background: #555; border-radius: 10px;
}

/* Laptop */
.laptopDevice {
  width: 90%;
  max-width: 1200px;
  height: 600px;
  border: 15px solid #222;
  border-radius: 10px 10px 0 0;
  position: relative;
  margin: 50px auto;
}
.laptopDevice::before { /* Camera */
  content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; background: #000; border-radius: 50%;
}
.laptopDevice::after { /* Hinge */
  content: ''; position: absolute; bottom: -15px; left: 20%; right: 20%;
  height: 15px; background: #444; border-radius: 0 0 10px 10px;
}
.laptopScreen { width: 100%; height: 100%; background: #fff; }

Thư viện có sẵn

Thay vì tự viết, có thể dùng:

• device.css - CSS only device frames
• marvelapp/device.css - Popular GitHub repo
• browserframe - Node package tạo screenshot trong browser frame