1.html实践

1.搜索栏小技巧（ctrl+shift+p）

wrap：自动换行。
emmet wrap：使用缩写包围。在搜索栏输入ul>li*，ul无序列表内每行都用li包围，*表示多行。
正则表达式替换：编辑>替换>使用正则表达式>输入内容：（目标替换内容），全部替换。例：删除全部[数字]内容。

alt+鼠标位置，多选行打相同的标签。
关闭自动改格式化：setting打开设置（ui）> 搜索format on save（保存时自动格式化）>取消保存自动格式化文件
format：格式化文档。手动格式化

2.页面制作技巧

TOC（Table of Content）目录
a href=#xxx，锚点链接。页面内容跳转。注：最后一个锚点无法到达页面顶部，可以添加空白区域解决，一般不解决。空白区高度根据屏幕高度添加，在600~700左右。例：<div style='height:600'>
添加图片：保证图片不能变形。（注：图片右键可以看高清大图。）

图片比例不对，使用工具裁剪。
图片尺寸过大，无需特殊处理。
图片体积过大（>300k下载速度慢），压缩/降低图片分辨率。

2.手机调试

1.meta:vp（viewport视口）

<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">

width=device-width（设备宽度），宽度和设备宽度一样
initial-scale=1.0（初始比例），默认缩放比1倍
minimum-scale=1.0（最小比例），最小缩放比1倍
maximum-scale=1.0（最大比例），最大缩放比1倍
user-scalable=no（用户是否能伸缩），用户不能缩放

2.img响应式宽度

img { max-width: 100%; }

图片最大宽度100%，图片不会超出屏幕宽度。

3.用wifi调试手机

手机和电脑处于同一wifi下，使用hs本地服务。将hs路径加上路径使用手机设备访问。

例：http://192.168.0.103:8080/jayChou.html

4.Chrome远程调试（安卓）

教程：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=zh-cn

注：如果浏览器中找不到【远程设备】这个选项了，那么可以：地址栏里输 chrome://inspect，回车进入。

3.部署github pages

使用远程仓库上传，上传页面后刷新。

1.使用github pages:

Settings>Pages>Branch（选中main）>使用Github Pages提供的网址，复制添加路径

2.添加预览地址：（github Repositories主页可以直接预览）

编辑按钮>添加Description和Website>save changes保存

我的demo页面：JayChou

html实践手机调试相关推荐

手机调试打开控制台方法vconsole
功能简介: 手机调试网页,看不到控制台,无法获取接口相关信息,引入vconsole可以实现代码演示: <!DOCTYPE html> <html><head>&l ...
adb链接手机调试android应用
adb链接手机调试android应用 hulk@hulk-Lenovo:~$ adb devices List of devices attached ???????????? no permiss ...
Vivo手机调试 logcat 信息一堆星号问题
最近用VIVO手机调试发现很多logcat信息为星号显示不全原来是VIVO的问题您好,我们收到开放平台在线客服反馈您咨询过"调试logcat内容为星号"的问题,现已有核实结果, ...
Android Studio ：1、连接手机调试（超级详细；附带连接测试录像）；2、点击Button按钮，显示Toast中的内容
手机端视频演示:[视频地址:https://live.csdn.net/v/18079] SVID_20200218_211351_1.mp4 操作环境: 电脑(Windows 10 教育版): ...
Tengine HTTPS原理解析、实践与调试【转】
本文邀请阿里云CDN HTTPS技术专家金九,分享Tengine的一些HTTPS实践经验.内容主要有四个方面:HTTPS趋势.HTTPS基础.HTTPS实践.HTTPS调试. 一.HTTPS趋势这一 ...
HbuilderX、Hbuilder编辑器如何使用手机调试app
编辑器版本:hbuilderX.Hbuilder 适用范围:混合app开发使用者调试应用首先要了解的是,编辑器自带手机调试功能,但需要先打开手机的开发者模式,安装基座后才可以进行调试工作. 步骤一: ...
ADB通过WiFi连接手机调试Android应用
ADB通过WiFi连接手机调试Android应用手里有一台小米2A由于USB口损坏,不能使用USB连接线调试开发,看到网上说可以使用WiFi连接调试,记录下方法和遇到的问题. 第一步手机上安装Wi ...
通过WIFI（不用数据线）连接Android手机调试
通过WIFI(不用数据线)连接Android手机调试本文主要介绍WIFI 链接手机调试,这里详细介绍了WIFI 链接Android手机实现调试的过程,有需要的小伙伴可以参考下 Android开发中少 ...
手机Web前端调试页面之——Chrome DevTools（谷歌浏览器）的模拟手机调试
Chrome DevTools(谷歌浏览器)的模拟手机调试前言在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况: 但是在手机中无法调试看到前端代码的步骤 ...

html实践手机调试

1.html实践

2.手机调试

3.部署github pages

html实践手机调试相关推荐

最新文章

热门文章