静态html页面如何兼容pc和移动端

在“test.html”文件中的head之间，录入如下代码：

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

在文件“test.html”中，引入一个css文件【common.css】

在common.css文件中前面部分，书写pc端的css代码

在common.css文件中的最底部，书写手机端的css代码，代码使用如何代码包括起来。

@media only screen and (max-width: 640px) {/*这里书写手机端的css代码，手机端的css代码是在pc端的代码基础上书写，类似于补充*/}

总结：
1、打开一个html测试文件。

2、在html文件中的head之间，录入代码：

3、在html文件中引入一个common.css文件。

4、在common.css中分别书写电脑端的css代码和手机端的css代码，电脑端代码在手机端代码的前面。

静态html页面如何兼容pc和移动端相关推荐

用vue实现H5页面托拽的div(兼容pc与移动端)
首先看效果图 PC端移动端首先实现拖拽需要知道三个事件,按下,移动和抬起 PC端鼠标按下事件:onmousedown鼠标移动事件:onmousemove鼠标抬起事件:onmouseup 移动端 ...
js面向对象思想封装拖拽功能，兼容pc和移动端
我们在开发项目过程中,很可能会碰到页面上某块需要可以拖拽移动的功能需求,网上已经有不少前辈分享了相关功能的案例,插件或者代码,但是考虑到项目功能需求,我们可能仅需要实现拖拽移动功能就可以,不需要其他功 ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
next.js+react+typescript+antd+antd-mobile+axios+redux+sass react服务端渲染构建项目，从构建到发布，兼容pc+移动端
简介:该教程兼容pc+移动端,如只需一端,可忽略兼容部分教程,根据需要运行的客户端构建项目 antd官网:https://ant.design/components/overview-cn/ antd ...
android 加载静态网页,React Native：如何在WebView内加载SPA或本地静态HTML页面？
React Native:如何在WebView内加载SPA或本地静态HTML页面? React Native WebView允许你使用uri属性加载可公开访问的资源,就像程序内的一个浏览器.但是,当你 ...
滑块验证码，图片滑块验证码（兼容pc和H5）
背景:登录部分以前用的是那种需要手动输入的验证码方式,现在好多同行都改成了滑块,或者图片滑块验证码的方式(咱们也需要与时俱进,不能落后与竞争对手哈).对于触屏(也就是H5页面)的网站,可以在pc端打开 ...
将动态aspx页面转换成为静态html页面的几种方法
1. 模版法该方法历史悠久,具体处理流程为采用一个html模版,将其中的关键字替换为我们希望的信息. 优点: 缺点: 所有的信息都要采取字符串批凑的方式来实现,比如需要一个列表,就需 ...

静态html页面如何兼容pc和移动端

静态html页面如何兼容pc和移动端

静态html页面如何兼容pc和移动端相关推荐

最新文章

热门文章