精华内容
下载资源
问答
  • 2021-06-11 17:36:52

    自适应网页设计,对于未曾接触过此类设计的人来说,可能觉得是十分难的事情。

    但是,如果你熟悉html,那么自适应设计其实只不过是在原PC端的html代码上做一些改动而已,并非一门新的技术语言。

    自适应网页设计代码需要做哪些调整,归纳来说,有6个调整是需要做的。

    745c9e508c0e4ed4e6f85a4913b88397.png

    自适应网页设计代码需要做的6大调整

    1、 允许或禁止调整页面大小

    iOS和Android浏览器都基于webkit核心,这两种浏览器以及其他的很多浏览器都支持 viewport meta元素覆盖默认的画布缩放设置,只需在HTML的

    标签中插入一个标签,标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍),下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

    如果不允许调整页面大小,那么把user-scalable=yes改为user-scalable=no,如:

    2、将网页修改为百分比布局

    自适应网页是绝对不可以使用固定尺寸来指定布局范围的,而是用百分比布局。

    当某个浏览窗口处于媒体查询固定的范围之外,网页就需要水平滚动才能完整浏览,而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式,具体来讲,就是css代码不会指定具体像素宽度:width:xxx px,而是会指定一个百分比宽度:width:xx%,或者直接就是width:auto。

    这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度:目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度。

    例如:

    更多相关内容
  • Android的屏幕适配,即使得某一元素在Android不同尺寸、不同分辨率的手机上具备相同的显示效果,这个问题一直以来都是我们Android开发者不得不面对的问题。本文参考了很多前人的博客,并对这一问题做一个总结,力求...
  • 7个步骤PC网站自动适配手机网页.pdf
  • vue自适应手机端的后台管理系统,针对手机端的适应效果进行优化 ,各种分辨率的调试都完美适应
  • 移动手机站,html5自动适配pc和手机,移动+pc,企业宣传网站
  • 本文介绍了ionic2屏幕适配实现适配手机、平板等设备的示例代码,分享给大家,具体如下: 推荐使用的编辑器是:VS code (Visual Studio Code)=>只负责编辑文档,不编译。 而WebStorm 有检查编译等,在ionic1开发...
  • * MobileWeb 通用功能助手,包含常用的 UA 判断、页面适配、search 参数转 键值对。 * 该 JS 应在 head 中尽可能早的引入,减少重绘。
  • 移动端手机和平板适配解决方案,已用于生产环境。
  • 主要介绍了手机端用rem+scss做适配的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • H5端rem适配方法,尤其针对某些手机,使用rem 之后仍然无法正常显示,针对某些手机做了适配判断,确保少数型号手机满足适配
  • 下面小编就为大家分享一篇基于界面适配华为手机的虚拟按键的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • h5响应式网站整套模板,手机适配
  • 本文从手机平台、机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则。手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂。在设计单款、单系列手机时,...
  • 在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
  • 网站模版 html5 css3 点击就能运行,完美适配 pc端 手机端,
  • 网页自适配手机

    千次阅读 2021-03-19 10:50:22
    今天把博客的大部分页面都加了自适配手机端,只要修改每个页面的css 即可。 之前大概知道怎么去改,但是页面太多实在觉得麻烦,就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性,所以现在虽然能改,...

    博客在手机打开一直不能适配,手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端,只要修改每个页面的css 即可。

    之前大概知道怎么去改,但是页面太多实在觉得麻烦,就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性,所以现在虽然能改,但是也是缝缝补补。 一直想换一套模板的,又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了,现在先这样用着。

     

    之前呢,考虑到很多人通过链接在手机上打开了我的博客,为了让他们访问加了个电脑访问的提示。通过js判断是否手机打开,如果是就弹窗提示。

    <script type="text/javascript">
        /* 手机打开提示 */
         var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
         var browser = navigator.userAgent.toLowerCase();
         var isMobile = false;
         for (var i = 0; i < mobileAgent.length; i++) {
             if (browser.indexOf(mobileAgent[i]) != -1) {
                 isMobile = true;
                 alert("本博客手机打开不适配,建议使用电脑访问效果最佳!点击确定继续使用手机浏览");
                 break;
             }
         }
    </script>

    效果:

    161611830087300049916.png

    这样肯定是不行的,还是得改css。html+css完全是靠在大学时老师教的那些撑着,一开始觉得完全够用,后面发现很多东西老师没有教过。接触的越多发现要学的就越多,虽然是一个后端开发,但是该学的还是得学。css最烦的就是调来调去还差点的,特别是屏幕宽度,就很无语~

     

    手机适配的话先加个meta viewport。移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了好几个像素。头部加上viewport 并设置一些默认属性。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    然后就是css判断了,使用@media来判断屏幕宽度,再调整响应模块的scc。

    /**手机适配**/
    @media only screen and (max-width: 767px) {
       header{width:100%}
       .banner{width: 100%;height: 100px;}
       .avatar{width: 80px;height: 80px;margin: 6px;}
       .avatar a{padding-top: 59px;width: 80px;height: 80px;background-size: 80px 78px;}
       .avatar a span{margin-top: 0px; padding-top: 0px; width: auto;height: auto;}
    .bloglist h3 {margin: 20px 0 10px 10px;}
    .bloglist figure {width:auto;margin-left: 4px;}
    .bloglist figure img {width: 90px;height: 60px;}
    .bloglist ul{width:64%}
    .dateview {width:100%;padding-left:4px;}
    .dateview span {margin: 0 3px;}
    .weixinnone,.thumbs{display: none}
    .right{width: 100%;margin-top: 22px}
    .right ul{width:64%;margin-left: 22px;}
    .weather{margin: 20px 50px;}
    .bloglinkli{display: block}
    footer{width:100%}
    }

    参考下面两篇文章

    viewport:viewport 深入理解

    media:CSS3@media查询

     

    没有适配手机之前的效果

    首页:

    161611929784137041587.png

    详情页:

    161612005990519039413.png

    做了适配之后的效果

    首页:

    161612000396423073854.png

    161612003128451034408.png

    详情页:

    161611997542255056654.png

     

     

     

    展开全文
  • 怎么PC端的页面快速适配手机

    千次阅读 2020-09-27 09:59:10
    好不容易做了一些看起来还算精致的页面,突然客户居然提出个奇怪的问题——“你们的项目没有适配手机端” ???看到这一行字的我,内心是懵逼加崩溃的。设计稿是1920像素的宽度,主体部分宽度为1200像素,这是妥妥...

    我在最近做了一个工期很赶的官网项目,是PC端的,客户指定要用bootstrap2.3.1jq1.9,在2020年的今天可以说很“原始”了,我甚至放弃了我原本用起来非常舒适的flex,全程用浮动和行内块在实现并排显示元素的。好不容易做了一些看起来还算精致的页面,突然客户居然提出个奇怪的问题——“你们的项目没有适配手机端

    ???看到这一行字的我,内心是懵逼加崩溃的。设计稿是1920像素的宽度,主体部分宽度为1200像素,这是妥妥的PC端设计图啊,当初说的也是PC端的官网,并不是手机端的APP,小程序,或者微信公众号。这里先说一下,bootstrap其实很乖的,如果只是一列的布局,比如中间放个文章、放个单列的数据列表,显示还是正常的。然而问题出在首页等一些页面上,把中间的1200px的宽度占得严丝合缝,每一个细节几乎都是像素级还原设计图,这样,精致有了,弹性没了,布局是脆脆的,掰一下,就面目全非……电脑的宽度容下1200px没有问题,但手机的屏幕很窄,一到手机上看,就悲剧了。

    所以怎么办呢?并没有手机端的设计图,好在客户的要求也不是很难,只是要求在手机上看的时候是电脑版的缩小版,显示得齐齐整整的,不要乱成一团即可。下面两个图,左边的是我调整前的样子,右边的是我调整后的样子。

    下面来谈一谈我的方法吧。

    有一种是比较科学的办法,很可惜我事后才想起。那就是px换成rem。为了方便计算,我使用的方法是:在网页加载完毕后,把屏幕的宽度除以19.2的值作为HTML的font-size,也就是让1920宽度的屏幕下,1rem的大小为100像素,在更小屏幕下,rem的大小等比例缩小(设计稿的宽度是1920,如果把设计稿分成19.2份,那么每份宽度为100。把设计稿上的100像素写成1rem,那么10像素就是0.1rem,这样计算起来很容易,而且由于更窄的屏幕宽度也是除以19.2来确定rem的,所以可以适配不同屏幕的大小)

    但我用的办法是另一种,我并没有把px改成rem。我是从视口(viewport)这里下的手。适配手机离不开视口的设置,一般来说,电脑屏幕宽度很大,网页显示在电脑宽度才是完整的,所以在手机上看的时候,把电脑宽度那样的一千多像素显示到300多像素的手机上,必然要缩小才可以显示完整,所以手机上看到的字是缩小的。一般对视口的使用是把视口的宽度设为设备屏幕的宽度,也可以用固定值

    是的,我这里就是使用了固定值,因为我主体部分宽度是1200,所以视口大小如果等于手机屏幕宽度,那么只有300多,显然不够,效果肯定是惨不忍睹的。之前我做第一个手机端项目的时候曾经把别人做的同类项目代码拿一部分来用了,我当时用的单位是px,那个时候我还没学过rem,但是居然在不同屏幕的手机上效果都还可以,原因就出现在视口上——对viewport的设置我是拷过来的,并没有改,而这里视口的宽度默认值是320——也就是说,我写的px的大小都是按照iPhone5屏幕宽度来的,在更大宽度的屏幕上,显示出来的样子被整个等比例放大了,字变大了,图变大了,在更大宽度的手机上看起来毫无违和感。

    所以这次的项目也应该把viewport设为一个合适的固定值。我第一个想到的是1920,因为是设计稿的宽度,结果在手机上看虽然缩小了,但是很不幸的,并不能显示完整。于是我使用了1366,就是我电脑的宽度,可以正常显示中间的1200,也没那么宽。果然在iPhone6等的手机上显示完整了,但是在iPhone5上仍然不完整。所以iPhone5需要更小的宽度,但是大于1200,最后我选择了1280。

    那么问题又来了,iPhone5和其他手机需要的视口宽度不同,而对于电脑端,屏幕宽度大于1366的显示效果更佳,把视口宽度写死成1366再等比例缩放没必要,要怎么统一这些问题呢?

    我使用的办法是用js判断屏幕宽度,根据屏幕宽度的情况动态地加上合适的viewport(默认是没有viewport的)。这样可以做到统一。注意判断屏幕宽度的时候不要用window.innnerWidth,因为这样得到的是屏幕的实际宽度,而手机的dpr大于1,实际宽度是大于我们看到的宽度的。

    代码就像这样:(使用了jq)

    // 判断屏幕宽度,动态设置视口,如果是大屏幕就不设置
    if(window.screen.width < 360) {
    	$('head').append('<meta name="viewport" content="width=1280">')
    } else if(window.screen.width < 1366) {
    	$('head').remove('[name="viewport"]')
    	$('head').append('<meta name="viewport" content="width=1366">')
    }
    else {
    	$('head').remove('[name="viewport"]')
    }

    即使是这样,在高度上,也可能还存在问题。首页的高度足够高了,无论是手机还是电脑,一屏的高度都无法显示完,但如果是内容很少的详情页,或者没有搜索到结果的列表页呢?

    比如像这样,footer的部分是紧跟着内容显示的,在电脑上,由于屏幕比例的问题,这个页面可以显示超过一屏,但是在手机上,这些内容显得有限捉襟见肘了。屏幕的下半部分有大量尴尬的空白,footer悬在半空了

    效果是这样的——

    这个问题的解决办法来自一本叫《CSS揭秘》的书

    我简单说一下解决的思路。

    1.首先,让页面最外层的容器,也就是body作为flex容器:display: flex;为了让里面元素正常显示,记得设置flex的方向为垂直方向:flex-directive: column;

    2.为了保证内容高度大于或等于屏幕高度,body就需要设置最小高度:min-height: 100vh;

    3.关键的一步来了,现在虽然body高度是全屏了,但是主体部分如果高度还是太小,那么看起来footer还是很奇怪——所以必须让主体部分占据剩余的高度:flex:1;(我是准备一个叫main的class,有需要的时候加到元素上)

    做了这三步之后,效果是这样的——

    虽然还是有大段空白,但是footer显示在了屏幕底部,显示在了正确的地方,而且在不同高度的手机上都是这样的,比如下面这两个手机,明显空白的高度是不同的,而底部显示的效果是一样的。

    最后补充一个小知识点,怎么在手机上看自己在电脑上写的本地网页

    我用的是anywhere。这个是一个命令行工具,首先你的电脑上要安装node.js然后才能安装anywhere:npm install anywhere -g(因为是命令行工具,所以需要全局安装。)然后,进入你项目根目录,存放HTML文件的地方,按shift和鼠标右键,在当前目录打开cmd命令行工具。然后,运行anywhere命令,就可以了,它会告诉你一个url,并自动打开当前目录下的index.html、用手机访问这个url,就可以看到效果啦,当然手机和电脑要连到同一个WiFi才可以

     

    展开全文
  • 基于HTML/CSS/JS 2048响应式完整代码(适配手机端)
  • 安卓手机适配

    2015-08-26 17:28:15
    支持安卓多屏幕分辨率适配,完美适配机型,针对适配难题不是问题,大家不用担心
  • 这是一个利用Fragment特性,分屏同时适配手机和平板的例子,有需要的可以下载一下
  • 主要介绍了Android开发获取手机Mac地址适配所有Android版本,需要的朋友可以参考下
  • 可以完全适配安卓智能手机和电视,将此工具放在跟java包下的根目录,跟java文件是同一个目录,然后运行该tools。资源文件必须写好一个dimen.xml作为标准
  • 完整的商城静态网页(适配手机端和电脑端) 完整的商城静态网页(适配手机端和电脑端)
  • 安卓app手机屏幕适配技巧.zip android app适合不同尺寸的屏幕 分辨率mdpi、hdpi 、xhdpi、xxhdpi 4条黄金法则 9-patch PNG
  • 主要介绍了vue cli3适配所有端方案的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • html5+app、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件,解决不同手机尺寸的手机适配问题
  • Unity之手机键盘自定义输入栏位置适配&不同手机分辨率适配 效果图 PC端展示 手机端展示(手机是顶部带摄像头的IQOO Neo 5 ) 设计思路 也没啥思路不思路的,就是获取键盘高度,在安卓获取安卓键盘高度,在...

    Unity之手机键盘自定义输入栏位置适配&不同手机分辨率适配

    效果图

    PC端展示

    在这里插入图片描述

    手机端展示(手机是顶部带摄像头的IQOO Neo 5 )

    请添加图片描述
    请添加图片描述
    请添加图片描述

    请添加图片描述

    设计思路

    1. 也没啥思路不思路的,就是获取键盘高度,在安卓获取安卓键盘高度,在IOS获取IOS的键盘高度,去找到对应的API即可。
    2. 由于我做了屏幕适配,在有刘海的屏幕时,内容区域的大小会发生偏移,比如手机顶部有摄像头的手机肯定在顶部有一部分是非工作区域,我们在做应用的时候,通常会把底图铺满包含非工作区域,但是在实际交互界面会把这块非工作区域留出来,不是铺满,就像上图中,“我是顶部内容” 并没有像在PC上紧贴在顶部,而是往下偏移了一些,这部分偏移的区域其实就是我手机摄像头所在的区域。
    3. 通常有刘海的屏幕,其底部也不是完全都是有效区域,底部会有一些非交互区域,所以对底部也是做了一些偏移。
    4. 所以在做手机键盘跟随位置的计算时就得考虑这部分偏移量,不然就会出现适配位置不精确的现象。
    5. ScreenFit 检测 手机屏幕是否有 不用于显示内容的屏幕区域,如果有,那就获取这部分区域的尺寸位置,然后在自己应用区域做相应的偏移。如果没有的话,那就不用偏移。

    场景搭建

    创建一个输入栏组件(InputField (TMP)),再添加一个发送按钮(Button),放置在同一父物体下,方便跟随键盘移动时统一由父物体移动,给父物体添加一个键盘高度适配的脚本(KeyboardAdaptation.cs)。
    在这里插入图片描述
    给界面顶部和底部添加文字标记
    在这里插入图片描述
    在Panel上添加屏幕适配脚本(ScreenFit.cs)
    在这里插入图片描述

    代码

     /// <summary>
        /// 获取安卓平台上键盘的高度
        /// </summary>
        /// <returns></returns>
        public int AndroidGetKeyboardHeight()
        {
            using (AndroidJavaClass UnityClass = new AndroidJavaClass("com.unity3d.player.UnityPlayer"))
            {
                AndroidJavaObject View = UnityClass.GetStatic<AndroidJavaObject>("currentActivity").
                    Get<AndroidJavaObject>("mUnityPlayer").Call<AndroidJavaObject>("getView");
    
                using (AndroidJavaObject Rct = new AndroidJavaObject("android.graphics.Rect"))
                {
                    View.Call("getWindowVisibleDisplayFrame", Rct);
                    Debug.Log(Screen.height - Rct.Call<int>("height"));
                    return Screen.height - Rct.Call<int>("height");
                }
            }
        }
    
    
      public float IOSGetKeyboardHeight()
        {
            return TouchScreenKeyboard.area.height;
        }
    
    
    using UnityEngine;
    
    
    
    public class ScreenFit : MonoBehaviour
    {
        public bool ReverseFit = false;
        //底部适配
        public bool BottomFit = true;
        void Awake()
        {
            SetScreenFit(GetComponent<RectTransform>());
        }
        void Start()
        {
            if (ReverseFit)
            {
                SetScreenFit(GetComponent<RectTransform>());
            }
    
        }
        public void SetScreenFit(RectTransform rect)
        {
            Vector3 offsetMax;
            Vector3 offsetMin;
            switch (Application.platform)
            {
                case RuntimePlatform.Android:
                    Rect[] cutou = Screen.cutouts;
                    if (cutou.Length > 0)
                    {
                        offsetMax = new Vector3(rect.offsetMax.x, -(cutou[0].height));
                        offsetMin = new Vector2(rect.offsetMin.x, (float)(cutou[0].height / 2.5));
                        Debug.LogFormat("offsetMax:{0},offsetMin:{1},cutou:{2}", offsetMax, offsetMin, cutou[0]);
                        if (ReverseFit)
                        {
                            rect.offsetMax = new Vector2(offsetMax.x, -offsetMax.y);
                            if (BottomFit)
                                rect.offsetMin = new Vector2(offsetMin.x, -offsetMin.y);
                        }
                        else
                        {
                            rect.offsetMax = offsetMax;
                            if (BottomFit)
                                rect.offsetMin = offsetMin;
                        }
                    }
                    break;
                case RuntimePlatform.IPhonePlayer:
                    var phoneType = SystemInfo.deviceModel;
                    float spacingNum = 0;
                    if (phoneType == "iPhone12,1" || phoneType == "iPhone11,8")
                    {
                        spacingNum = 30;
                    }
                    offsetMax = new Vector3(rect.offsetMax.x, -(Screen.safeArea.y + spacingNum));
                    offsetMin = new Vector2(rect.offsetMin.x, (float)(Screen.safeArea.y / 2.5));
                    if (ReverseFit)
                    {
                        rect.offsetMax = new Vector2(offsetMax.x, -offsetMax.y);
                        if (BottomFit)
                            rect.offsetMin = new Vector2(offsetMin.x, -offsetMin.y);
                    }
                    else
                    {
                        rect.offsetMax = offsetMax;
                        if (BottomFit)
                            rect.offsetMin = offsetMin;
                    }
                    break;
            }
        }
    }
    
    

    参考

    Unity 获取手机键盘弹出高度

    工程项目

    链接:https://pan.baidu.com/s/1nUzRvRoChCvgtOxl5gMm6A
    提取码:ma5u

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,140
精华内容 38,856
关键字:

如何让网站适配手机