End mobile: Mobile / Tablet / Smart TV / Smart Watch / VR device / AR Settings
Windows viewport
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
Device-width = width : width equal to the width of the display device system
Scale =. 1-Initial : later . 4 th final decision does not allow any scaling.
minimum-scale=1
maximum-scale=1
user-scalable=no
Set design draft resolve inconsistencies screen size of the phone side of the issue
Pseudo-classes
Pseudo class is actually a certain state of the element.
Element: hover: mouse up state of suspension
A: link: link not click when the state
A: visited : links are visited state
A: the Active : When the link is clicked state
Input: focus state when the focus input box, i.e. a state where the cursor.
Pseudo-element
I.e., pseudo-element is false elements to create false elements through the interior element can create 2 in the false element . 1 one is inside the top element, the rearmost one of the inside
Elements: the before, create a fake in front of the child element inside the element
Elements: the After , create a fake child element inside the element behind
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
<style type="text/css"> .d1:before{ content: "0"; display: block; width: 100px; height: 100px; background: skyblue; }
.d1:after{ content: "4"; display: block; width: 100px; height: 100px; background: skyblue; } </style> </head> <body> <! - pseudo-elements before -> <div class="d1"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div> </body> </html>
|
Chat box Case:
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .main{ width: 800px; margin: 0 auto; } .ltk{ width:600px ; height: 80px; background: skyblue; color:#fff; line-height: 80px; padding: 0 20px; margin: 10px auto; border-radius: 20px; position: relative; }
.ltk:before{ /*content必须要写*/ content: ""; display: block; width: 0; height: 0; border-top:10px solid transparent ; border-left:15px solid transparent ; border-right:15px solid skyblue ; border-bottom:10px solid transparent ; position: absolute;
left: -30px; top: 20px; } </style> </head> <body> <div class="main"> <div class="ltk"> 今晚看电影？ </div>
<div class="ltk"> 记得带身份证？ </div> </div> </body> </html>
|
| <meta name="viewport" content="width=750,user-scalable=no" /> |
响应式：
不同的屏幕的大小，显示不一样的内容。
手机端：背景蓝色
手机的显示分辨率：一般小于640px
平板：深蓝色
平板的分辨率：一般是大于640px，小于960px
Pc：黑色