Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 在xxx.html的head加上
- ```css
- /*
- width=device-width :表示宽度是设备屏幕的宽度
- initial-scale=1.0:表示初始的缩放比例(几倍)
- minimum-scale=1.0:表示最小的缩放比例(几倍)
- maximum-scale=1.0:表示最大的缩放比例(几倍)
- user-scalable=no:表示用户是否可以调整缩放比例
- */
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- ```
- 移动端媒体查询的一些尺寸参考
- ```css
- /*iPhone5/SE */
- @media screen and (min-width: 320px) and (max-width: 359px) {
- html {
- font-size: 12.8px;
- }
- }
- /* Galaxy S5 */
- @media screen and (min-width: 360px) and (max-width: 374px) {
- html {
- font-size: 14.4px;
- }
- }
- /* iPhone6/7/8 iPhoneX*/
- @media screen and (min-width: 375px) and (max-width: 385px) {
- html {
- font-size: 15px;
- }
- }
- @media screen and (min-width: 386px) and (max-width: 392px) {
- html {
- font-size: 15.44px;
- }
- }
- @media screen and (min-width: 393px) and (max-width: 400px) {
- html {
- font-size: 16px;
- }
- }
- /* iPhone6/7/8 plus */
- @media screen and (min-width: 401px) and (max-width: 414px) {
- html {
- font-size: 16.48px;
- }
- }
- /*iPad */
- @media screen and (min-width: 750px) and (max-width: 800px) {
- html {
- font-size: 30.72px;
- }
- }
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement