神奇的网页适应手机的一句话

于 2018-11-03 11:41:20 发布
阅读量118 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36935391/article/details/83685612
版权 
<meta name="viewport" content="width=device-width, initial-scale=1"/>
飞飞翼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
移动端自适应手机屏幕网页代码+jqueryMobile日期选择插件
07-02
一款不错的日期选择器，简单又方便，适用于手机网页。。
照片捕捉摄影服务响应式网页模板
01-21
在描述中，虽然只有简短的“照片捕捉摄影服务响应式网页模板”这一句话，但我们可以推断这个模板的核心功能和目标用户群体。它强调了“照片捕捉”，意味着该模板可能有特别的设计来突出照片展示，如大图滑动、网格...
手机网站实现自适应代码
杨多多的技术学习博客
08-09 1015
适应手机端的jQuery图片滑块动画DEMO演示
zaixianshouce的博客
12-09 151
  在线预览 下载地址 实例代码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;...
JqueryMobile适配手机端
chituo7277的博客
10-22 278
设置设备的适配： 让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0： <meta name="viewport" content="width=device-width, initial-scale=1"> ...
jquery手机端自适应代码
Elvin的博客
01-27 1441
(function() {     'use strict';     window.onresize = function() {         changeFontSize();     }     function changeFontSize() {         var W = document.documentElement.clientWidth;     
自适应式国外平面网页设计师网站html源码模板
06-15
"自适应式国外平面网页设计师网站html源码模板" 是一个用于创建平面设计师个人网站的HTML模板，具有自适应性，意味着它能够根据不同的设备屏幕大小（如桌面、平板、手机）自动调整布局，提供良好的用户体验。...
学校PSD格式的网页模板
10-20
这句话是对资源质量的评价，表明这些网页模板在WWW.CDLYU.COM这个网站上被认为是优质的。该网站可能是一个提供免费或付费设计资源的平台，用户可以在那里找到各种设计素材，包括这个学校主题的PSD模板。 【网页模板...
经典DIV+CSS网页HTML模版
01-19
4. **响应式设计**：由于“如果下载的人多，会多放的”这句话，我们可以推测这个模版可能包含响应式设计，即模版能够根据用户的设备（如桌面、平板、手机）自动调整布局，提供良好的用户体验。 5. **压缩包子文件的...
千年之恋网页千年之恋网页制作代码.rar
最新发布
05-24
【描述分析】：“千年之恋网页制作代码”这句话是该压缩包的描述，它提示我们这个压缩包的内容是关于“千年之恋”这个主题的网页的源代码。这意味着里面可能包含HTML、CSS、JavaScript等文件，这些文件组合起来构建...
用jQuery Mobile做HTML5移动应用的三个优缺点
田十一的博客
07-06 3781
JQuery Mobile & HTML5 使用HTML5和JavaSript构建一个手机应用，你需要写很多JavaScript代码。然而，带有触摸屏的设备的UI控制和处理与标准的Web应用程序非常不同。因此，你会想要使用现成的手机HTML5/JavaScrip框架（除非你有很多的时间并且打算将所有东西重新构建）。现在有很多现成的框架可供选择：jQTouch、 Sencha Touch 
jquery 自适应屏幕大小
廖圣平
12-05 5567
// $(document).ready(function(){ // //初始化宽度、高度 // $(".content-out-huo").width($(window).width()); // $(".content-out-huo").height($(window).height()); // //当文档窗口发生改变时 触发 //
jsp页面适应手机页面
热门推荐
记忆_2012_有你 的专栏
10-20 1万+
content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />
jsp页面如何适配不同屏幕大小的手机浏览器？
技术博客
01-14 1859
一，应用场景        移动应用app终端，需要定制一些活动页面，开展运营类的活动。可以使用jsp定制活动页面，使用css样式适配不同终端的屏幕大小。 二，css适配样式       css适配样式如下： //适配手机屏幕宽度&lt;=330px的手机 @media screen and (max-width:330px) { body { font-size: 32%...
关于JSP适配手机的问题
Derik_Zhang的专栏
11-03 4555
经常遇到JSP网页需要适配手机设备的尺寸问题 解决：在头wen
html5自动适应屏幕宽度
weixin_30486037的博客
03-13 291
网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。一、 自然拉伸如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100% ，表...
页面设置body高度height:100%不生效解决办法
Think____的博客
08-06 1万+
直接body{ height: 100%; }不生效的话，那就在前面加个html吧，如下： html,body { height: 100% } 如果想要知道原理的可以参阅下面这篇文章，写得很好 转自：https://blog.csdn.net/javaloveiphone/article/details/51098972...
给我写一个网页html适应手机和电脑适配案例
05-27
好的，以下是一个简单的适应手机和电脑的HTML页面示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>适应手机和电脑的页面</title> <style> .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #f5f5f5; } .title { font-size: 2rem; margin-bottom: 1rem; } .content { font-size: 1.5rem; text-align: center; padding: 1rem; background-color: white; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); border-radius: 0.5rem; width: 90%; max-width: 30rem; } @media screen and (min-width: 768px) { .container { flex-direction: row; } .title { font-size: 4rem; margin-right: 2rem; } .content { font-size: 2rem; padding: 2rem; width: 50%; max-width: 40rem; } } </style> </head> <body> <div class="container"> <div class="title">适应手机和电脑的页面</div> <div class="content"> <p>这是一个适应手机和电脑的页面示例。</p> <p>使用CSS Flexbox和媒体查询可以实现页面在不同屏幕尺寸下的适配。</p> <p>在手机上，标题和内容垂直居中，宽度为90%；在电脑上，标题和内容水平排列，宽度为50%。</p> </div> </div> </body> </html> ``` 这个页面使用了CSS Flexbox布局和媒体查询，可以在不同屏幕尺寸下实现适配。在手机上，标题和内容垂直居中，宽度为90%；在电脑上，标题和内容水平排列，宽度为50%。同时，使用Viewport meta标签确保页面在不同设备上正确地显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞飞翼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值