web前端全栈0基础到精通（祺）16

vw + vh
- vw 即 Viewport’s width 的简写，是 CSS3 规范中的视口单位，相对于视口的宽度，视口被均分为 100 单
  
  位的 vw, 相对于视口的高度，视口被均分为 100 单位的 vh。
- 750px设计稿 750px=100vw 1px = 0.1333333vw;
  
  如果使用rem 预设1rem = 100px 100px就是 13.333333vw 由此vm和rem 就可以进行换算了
Media
- ```
  @media (max-width: 768px) {.banner {margin-top: 44px;background-color: blue;height: 2.88rem;width: 100%;}}
```
- 兼容问题
  - 小字体处理
    - 不同浏览器的最小字体不同，有的是10px，有的是12px。
      
      解决办法：设置字体时，不要小于12px，如果一定要小于12px，使用
      
      transform:scale()进行缩放。
移动端重置样式
- 禁止用户选中文字
  
  -webkit-user-select: none;
  
  去除 android 下 a/button/input 标签被点击时产生的边框 & 去除 ios 下 a 标签被点击时产生的半透明灰
  
  色背景。
  
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  
  按钮在 ios 下都是圆角。
  
  -webkit-appearance: none;

web前端全栈0基础到精通（祺）16相关推荐

web前端全栈0基础到精通（祺）01
前端的概述 web的发展史 web1.0 简单的静态页面早期三大门户搜狐新浪网易 web2.0 更注重用户之间的交互用户即是信息的消费者也是制造者微博 web3.0 人工智能复杂的页面功 ...
web前端全栈0基础到精通（祺）vue 02
一.localStorage 和 sessionStorage的区别相同点: 都可以实现存储. 它们的大小都是5MB左右. 它们的存储方式都必须以字符串进行存储!!!! 它们的语法都是相同.存值: ...
web前端全栈0基础到精通（祺）08
表单表单标签注册和登录目的:收集用户信息,能够输入内容 input标签 text 文本输入类型 <input type="text" name="userna ...
web前端全栈0基础到精通（祺）js 02
数据类型分类. 基本数据类型: number string boolean null undefined 复杂/复合/引用数据类型: object array function 检验数据类型语法: ...
web前端全栈0基础到精通（祺）11
HTML5基础 HTML5中新增的布局标签 html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 (更加语义化) header标签 <hea ...
web前端全栈0基础到精通（祺）vue 01
一.vue的基本知识 1.1vue 的官网 https://cn.vuejs.org/ 1.2概念渐进式的JavaScript框架????渐进式... 自底向上,逐渐增强.vue.js它本身就是一个 ...
web前端全栈0基础到精通（祺）vue 04
一.组件(component) 在前端,两大概念一.模块模块指的就是逻辑封装,一些共通的功能,你把它提取出来,封装到js中.你需要这个功能,你就引入js es6的导入导出(导出的方式决定你引入的方 ...
web前端全栈0基础到精通（祺）07
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
web前端全栈0基础到精通（祺）03
盒模型基础选择器通配符选择器 * {width: 200px;height: 200px;background-color: yellow; } 标签选择器 div {width: 200px;h ...
web前端全栈0基础到精通（祺）js 10
表单快速获取表单元素 \1. 需要先获取表单 form \2. 快速获取表单元素 form.name值 var form = document.getElementsByTagName('form' ...

web前端全栈0基础到精通（祺）16

web前端全栈0基础到精通（祺）16相关推荐

最新文章

热门文章