网站相关前置许可,网站开发最新教程,小说网站架构,百度收录提交申请网站谷歌模拟器#xff1a;能直接看到移动端效果 屏幕分辨率 右键电脑桌面 #xff0c;点击显示设置 PC端是逻辑分辨率#xff0c;移动端代码也是参考逻辑分辨率 网页端宽度和逻辑分辨率尺寸相同 手机屏幕尺寸不同#xff0c;网页宽度均为 100% 所以就需要添加视口标签#x… 谷歌模拟器能直接看到移动端效果 屏幕分辨率 右键电脑桌面 点击显示设置 PC端是逻辑分辨率移动端代码也是参考逻辑分辨率 网页端宽度和逻辑分辨率尺寸相同 手机屏幕尺寸不同网页宽度均为 100% 所以就需要添加视口标签显示 HTML 网页的区域用来约束 HTML 尺寸 其中包含 name 和 content 属性 打开 本地 web 服务器则可以看到 网页宽度 和 移动端网页逻辑分辨率宽度一样 二倍图 设计稿里面每个元素的尺寸的倍数 作用防止土拍你在高分辨率名目下模糊失真 一般参考 iphone6/7/8设计其分辨率是 375所以二倍图是 750 适配方案 (两种 宽度适配宽度自适应一般是 pc 端网页制作 百分比布局 Flex布局等比适配宽高等比缩放移动端 rem vw rem 手机屏幕大小不同网页元素宽高等比例缩放 rem单位是相对单位rem单位是相对于HTML标签的字号计算结果1 rem 1 HTML 字号大小 1.手机屏幕大小不同分辨率不同如何设置不同HTML标签字号 媒体查询检测视口宽度然后编写差异化的 CSS样式。某个条件成立执行对应CSS样式media媒体特性{ 选择器 { CSS属性 } } 2.设备宽度不同HTML标签字号设置多少合适 rem布局中HTML标签的字号为视口宽度的 1/10 只有检测到屏幕分辨率小括号里的条件满足是 375才会执行大括号中的 代码 rem布局中HTML标签字号为视口宽度的 1/10 手机分辨率多种多样如果要根据每种手机分辨率来写 HTML字号太麻烦。 可以使用 flexible.js那么就可以根据不同分辨率的移动端加上不同的根字号而不用自己写了 将设计稿中的 px 转换为 rem以便适配移动端 在引入了 flexible.js的移动端网页直接右键检查从元素中获取 less 在less中书写样式保存之后直接能生成同样的 css 文件支持除法能计算出结果将 px 转换为 rem在less中嵌套选择器相应的 css中能直接 写出后代选择器 因为 shiftalta也是打开截图的快捷键所以在设置中将该注释快捷键修改下单行注释无法写到 css 文件因为 css不支持 // 的写法 双击修改块注释快捷键 less运算 less嵌套: 写到谁里边就表示谁 less变量 (变量名作为属性值 less导入 less导出 // out : . / index.css 将现在代码所在的 less文件在当前文件夹中导出并且改名为 index.css// out : . /css / 将现在代码所在 less 文件 在当前文件夹中新建一个文件夹并导出在该文件夹中// out : . /mycss/index.css 将现在代码所在 less 文件当前文件夹中新建一个文件夹 mycss并将代码文件改名 index.css并导入其中 less禁止导出也就是less在保存的时候不生成 css 文件
