用户名：竟师源
分享一个短波爱好者的福音，Web SDR，只要能连上互联网，就能随时随地收听全频率短波电台！ 不知道各位是否在玩，浏览器直接打开就能收听 支持SSB单边带，可以守听国内外Hamer的短波通联，晚上7点至10点是高峰，尤其集中在14250KHz附近，感兴趣的朋友可以试试，非常有趣，也可以学到很多知识。 网页地址： websdr.ewi.utwente.nl:8901/m.html
发表时间：2022-05-11 13:05:07
管理员回复：
嗨，你好。我是系统管理员，欢迎您的到来。
一. 允许网页宽度自动调整 <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。 这一条非常重要。 具体说，CSS代码不能指定像素宽度： width:xxx px; 只能指定百分比宽度： width: xx%; 或者：width:auto; 这里开发是指一个网页不仅能用在ps上，也能同时用于移动端，但是对于webapp这种还是需要单独做一个webapp使用的页面。 三. 相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em/rem）。 body { font: normal 100% Helvetica, Arial, sans-serif; } 上面的代码指定，字体大小是页面默认大小的100%，即16像素。 h1 { font-size: 1.5em; } 然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。 small { font-size: 0.875em; } small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。 四.流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。 .main { float: right; width: 70%; } ``.leftBar { float: left; width: 25%; } float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。 另外，绝对定位（position: absolute）的使用，也要非常小心。 五. "自适应网页设计"的核心，就是CSS3引入的Media Query模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" /> 上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。 <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> 如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。 除了用html标签加载CSS文件，还可以在现有CSS文件中加载。 @import url("tinyScreen.css") screen and (max-device-width: 400px); 六.CSS的@media规则 同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。 @media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } } 上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。 七. 图片的自适应（fluid image） 除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。 这只要一行CSS代码： img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效，所以可以写成： img, object { max-width: 100%;} 老版本的IE不支持max-width， 所以写成：img { width: 100%; } 不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。 点击阅读全文 打开CSDN，阅读体验更佳 HTML5 移动页面自适应手机屏幕四类方法总结 主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值，需要的朋友可以参考下 带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看） 最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！ 开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册） 好了，咱们开始吧！ 1、首先我先在电脑上打开网页 2、接下来使用chrome浏览器自带的手机模拟器看看这个网... 浏览器打开 评论(2) 请先 登录 后发表或查看评论 怎么实现手机端网页页面自适应调整_云南仟龙Mark的博客... 今天分享下”怎么实现手机端网页页面自适应调整“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 总算完成了手头上的新项目,被拐儿童又重归啦! 如何使网页自动适配手机端_weixin_30873847的博客 网页自适应手机端的方式有两种: 1. PC端的设计与手机端相差不大,利用 @media媒体查询 调整百分比 2. PC端与手机端的设计分离,利用判断设备的方式做301跳转 下面就结合源代码讲一讲如何实际实现这两种方案: ... 网页自动适应手机端 判断是否为手机端 if (window.navigator.userAgent.toLowerCase().indexOf('mobile') == -1) {//-1 为PC端 1为移动端 } 贴出代码 复制过去吧 网站对移动设备友好，确保适当的绘制和触屏缩放： <meta name="viewport" content="width=device-width, in... 浏览器打开 手机端网页所有内容根据屏幕大小自适应(大小，位置) 手机端和PC端网页的百分百自适应 浏览器打开 网页自适配手机端_sunon_的博客_网页适配手机 网页自适配手机端 博客在手机打开一直不能适配,手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端,只要修改每个页面的css即可。 之前大概知道怎么去改,但是页面太多实在觉得麻烦,就一直没有去改。当初做博客的时候也没... 带你一步步从PC(电脑)网页自适应到手机端网页(小白入门必看) 最近帮老师改个网站,将PC端网页改为手机端网页,虽然对于有一定开发经验的前端开发者是很easy的事情,但是呢,对于小白来说,还是很一头雾水的。下面咱们就从头来进行实战,看看自适应到手机端到底是怎么回事!开发必备工具:chrome浏览器一部... 网页自适配手机端 博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。 之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性，所以现在虽然能改，但是也是缝缝补补。 一直想换一套模板的，又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了，现在先这样用着。 之前呢，考虑到很多人通过链接在手机上打开了我的博客，为了让他们访问加了个电脑访问的提示。通过js判断是否手机打开，. 浏览器打开 最新发布 怎么实现手机端网页页面自适应调整 今天分享下”怎么实现手机端网页页面自适应调整“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 总算完成了手头上的新项目，被拐儿童又重归啦！在做新项目的环节中，碰到许多非常值得思索的点，快速道来。 第一个碰到的便是网页页面尺寸响应式的问题。 现阶段较为常见的办法有： • 最先要让页面尺寸布满显示屏又不可以外溢。只须要在html标识内添加viewport（如下所示），主要参数各自表明：页面宽度＝ 显示屏宽度，较大和最少伸 浏览器打开 网页自动适应手机端_心动止于人海。的博客 如果只是写手机端页面 可以不用加。但是宽度必须按照百分比写。不加的话字体一般要30px才看的清楚,加了的话就是正常的12px如果是网页自动适应手机端就一定要加。最外层的div宽度设为百分百。以后再根据需要排版,可以用px或者百分比但是... 如何开发手机端网页,如何让网页自适应?_学后台做前端的... 很明显,当在移动端上显示时,它仍然是按照,pc端模式显示的。 所以字体非常小,都快看不清了,需要放大才行。 好了现在我们来开始正式实现让网页自适应,不管在pc电脑端还是移动端都能正常的显示。 BODY background=自适应大小_什么是自适应网站？自适应站点对百度友好设计 什么是自适应网站？指的是网页通过不同大小终端设备自适应显示，根据屏幕大小、宽度自动调整布局，自适应也可以叫响应式。自适应网站是HTML5的新技术。自适应网站的优点：1、在PC端、手机端和IPAD端都是采用一套代码。2、不需要另外申请其他的域名，一个账号码管理一个后台。3、有效避免网页内容重复，可以专心维护一个网页。4、网站优化更简单，对搜索引擎友好。自适应站点对百度友好设计1、applicable... 浏览器打开 解决pc端网页在手机上的一些兼容问题 解决pc端网页在手机端的一些兼容问题 1.viewPoint 解决屏幕适应问题 1. 如果想在手机端适应的更好，添加下面一段 2. 如果想在ios端也适应，删除下面一段 2.es6->es5 低版本的安卓手机可能会白屏，是由新特性不支持引起的 解决代码es6新特性兼容问题 npm 安装 npm install babel-polyfill npm install es6-promise main.js 引入 import ‘babel-polyfill’ import Es6Promi 浏览器打开 手机端网页自适应解决方案_yanbinzou的博客_asp网站手机... 手机端网页自适应解决方案 (function(doc, win) { vardocEl = doc.documentElement, resizeEvt ='orientationchange'inwindow?'orientationchange':'resize', recalc =function() { varclient html+css手机端自适应网页_JspFnta的博客_html 适应手机端 html+css手机端自适应网页 一,最近在做项目,写移动端的网页,主要是自适应的问题。bootstrap等前端框架用的不好,又不想耽误时间,不能自适应很烦人,这里给大家介绍下我的方法, 也是结合了很多人的思路。 html和css结合实现手机端网页自适应的代码 本篇文章给大家带来的内容是关于html和css结合实现手机端网页自适应的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线） 一，最近在做项目，写移动端的网页，主要是自适应的问题。boo
发表时间：2022-05-11 13:29:22
用户名：竟师源
分享一个短波爱好者的福音，Web SDR，只要能连上互联网，就能随时随地收听全频率短波电台！
不知道各位是否在玩，浏览器直接打开就能收听
支持SSB单边带，可以守听国内外Hamer的短波通联，晚上7点至10点是高峰，尤其集中在14250KHz附近，感兴趣的朋友可以试试，非常有趣，也可以学到很多知识。
网页地址：
websdr.ewi.utwente.nl:8901/m.html
发表时间：2022-05-11 13:05:07
管理员回复：
嗨，你好。我是系统管理员，欢迎您的到来。
用户名：竟师源
一. 允许网页宽度自动调整
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
这一条非常重要。 具体说，CSS代码不能指定像素宽度： width:xxx px; 只能指定百分比宽度： width: xx%; 或者：width:auto; 这里开发是指一个网页不仅能用在ps上，也能同时用于移动端，但是对于webapp这种还是需要单独做一个webapp使用的页面。
三. 相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em/rem）。
body { font: normal 100% Helvetica, Arial, sans-serif; }
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 { font-size: 1.5em; }
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small { font-size: 0.875em; }
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
四.流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main { float: right; width: 70%; } ``.leftBar { float: left; width: 25%; }
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。 另外，绝对定位（position: absolute）的使用，也要非常小心。
五. "自适应网页设计"的核心，就是CSS3引入的Media Query模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。 除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
六.CSS的@media规则 同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } }
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
七. 图片的自适应（fluid image） 除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。 这只要一行CSS代码：
img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，
所以写成：img { width: 100%; }
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。
点击阅读全文
打开CSDN，阅读体验更佳
HTML5 移动页面自适应手机屏幕四类方法总结
主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值，需要的朋友可以参考下
带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看）
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！ 开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册） 好了，咱们开始吧！ 1、首先我先在电脑上打开网页 2、接下来使用chrome浏览器自带的手机模拟器看看这个网...
浏览器打开
评论(2) 请先 登录 后发表或查看评论
怎么实现手机端网页页面自适应调整_云南仟龙Mark的博客...
今天分享下”怎么实现手机端网页页面自适应调整“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 总算完成了手头上的新项目,被拐儿童又重归啦!
如何使网页自动适配手机端_weixin_30873847的博客
网页自适应手机端的方式有两种: 1. PC端的设计与手机端相差不大,利用 @media媒体查询 调整百分比 2. PC端与手机端的设计分离,利用判断设备的方式做301跳转 下面就结合源代码讲一讲如何实际实现这两种方案: ...
网页自动适应手机端
判断是否为手机端 if (window.navigator.userAgent.toLowerCase().indexOf('mobile') == -1) {//-1 为PC端 1为移动端 } 贴出代码 复制过去吧 网站对移动设备友好，确保适当的绘制和触屏缩放： <meta name="viewport" content="width=device-width, in...
浏览器打开
手机端网页所有内容根据屏幕大小自适应(大小，位置)
手机端和PC端网页的百分百自适应
浏览器打开
网页自适配手机端_sunon_的博客_网页适配手机
网页自适配手机端 博客在手机打开一直不能适配,手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端,只要修改每个页面的css即可。 之前大概知道怎么去改,但是页面太多实在觉得麻烦,就一直没有去改。当初做博客的时候也没...
带你一步步从PC(电脑)网页自适应到手机端网页(小白入门必看)
最近帮老师改个网站,将PC端网页改为手机端网页,虽然对于有一定开发经验的前端开发者是很easy的事情,但是呢,对于小白来说,还是很一头雾水的。下面咱们就从头来进行实战,看看自适应到手机端到底是怎么回事!开发必备工具:chrome浏览器一部...
网页自适配手机端
博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。 之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性，所以现在虽然能改，但是也是缝缝补补。 一直想换一套模板的，又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了，现在先这样用着。 之前呢，考虑到很多人通过链接在手机上打开了我的博客，为了让他们访问加了个电脑访问的提示。通过js判断是否手机打开，.
浏览器打开
最新发布 怎么实现手机端网页页面自适应调整
今天分享下”怎么实现手机端网页页面自适应调整“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 总算完成了手头上的新项目，被拐儿童又重归啦！在做新项目的环节中，碰到许多非常值得思索的点，快速道来。 第一个碰到的便是网页页面尺寸响应式的问题。 现阶段较为常见的办法有： • 最先要让页面尺寸布满显示屏又不可以外溢。只须要在html标识内添加viewport（如下所示），主要参数各自表明：页面宽度＝ 显示屏宽度，较大和最少伸
浏览器打开
网页自动适应手机端_心动止于人海。的博客
如果只是写手机端页面 可以不用加。但是宽度必须按照百分比写。不加的话字体一般要30px才看的清楚,加了的话就是正常的12px如果是网页自动适应手机端就一定要加。最外层的div宽度设为百分百。以后再根据需要排版,可以用px或者百分比但是...
如何开发手机端网页,如何让网页自适应?_学后台做前端的...
很明显,当在移动端上显示时,它仍然是按照,pc端模式显示的。 所以字体非常小,都快看不清了,需要放大才行。 好了现在我们来开始正式实现让网页自适应,不管在pc电脑端还是移动端都能正常的显示。
BODY background=自适应大小_什么是自适应网站？自适应站点对百度友好设计
什么是自适应网站？指的是网页通过不同大小终端设备自适应显示，根据屏幕大小、宽度自动调整布局，自适应也可以叫响应式。自适应网站是HTML5的新技术。自适应网站的优点：1、在PC端、手机端和IPAD端都是采用一套代码。2、不需要另外申请其他的域名，一个账号码管理一个后台。3、有效避免网页内容重复，可以专心维护一个网页。4、网站优化更简单，对搜索引擎友好。自适应站点对百度友好设计1、applicable...
浏览器打开
解决pc端网页在手机上的一些兼容问题
解决pc端网页在手机端的一些兼容问题 1.viewPoint 解决屏幕适应问题 1. 如果想在手机端适应的更好，添加下面一段 2. 如果想在ios端也适应，删除下面一段 2.es6->es5 低版本的安卓手机可能会白屏，是由新特性不支持引起的 解决代码es6新特性兼容问题 npm 安装 npm install babel-polyfill npm install es6-promise main.js 引入 import ‘babel-polyfill’ import Es6Promi
浏览器打开
手机端网页自适应解决方案_yanbinzou的博客_asp网站手机...
手机端网页自适应解决方案 (function(doc, win) { vardocEl = doc.documentElement, resizeEvt ='orientationchange'inwindow?'orientationchange':'resize', recalc =function() { varclient
html+css手机端自适应网页_JspFnta的博客_html 适应手机端
html+css手机端自适应网页 一,最近在做项目,写移动端的网页,主要是自适应的问题。bootstrap等前端框架用的不好,又不想耽误时间,不能自适应很烦人,这里给大家介绍下我的方法, 也是结合了很多人的思路。
html和css结合实现手机端网页自适应的代码
本篇文章给大家带来的内容是关于html和css结合实现手机端网页自适应的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线） 一，最近在做项目，写移动端的网页，主要是自适应的问题。boo
发表时间：2022-05-11 13:29:22